ampersand-dom-bindings - npm Package Compare versions

Comparing version 2.4.0 to 3.0.0

ampersand-dom-bindings.js

@@ -55,4 +55,4 @@ var Store = require('key-tree-store');
             return binding.selector;
-        } else if (binding.role) {
-            return '[role="' + binding.role + '"]';
+        } else if (binding.hook) {
+            return '[data-hook="' + binding.hook + '"]';
         } else {
@@ -59,0 +59,0 @@ return '';

package.json

 {
   "name": "ampersand-dom-bindings",
   "description": "Takes binding declarations and returns key-tree-store of functions that can be used to apply those bindings.",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "author": "'Henrik Joreteg' <[e-mail]>",
@@ -6,0 +6,0 @@ "bugs": {

README.md

@@ -28,3 +28,3 @@ # ampersand-dom-bindings
     type: 'text',
-    selector: '.someSelector' // or role
+    selector: '.someSelector' // or hook
 }
@@ -42,3 +42,3 @@ ```
     type: 'class',
-    selector: // or role
+    selector: // or hook
 }
@@ -53,3 +53,3 @@ ```
     type: 'attribute',
-    selector: '#something', // or role
+    selector: '#something', // or hook
     name: 'width'
@@ -66,3 +66,3 @@ }
     type: 'value',
-    selector: '#something', // or role
+    selector: '#something', // or hook
 }
@@ -78,3 +78,3 @@ ```
     type: 'booleanClass',
-    selector: '#something', // or role
+    selector: '#something', // or hook
     // to specify name of class to toggle (if different than key name)
@@ -96,3 +96,3 @@ // you could either specify a name
     type: 'booleanAttribute',
-    selector: '#something', // or role
+    selector: '#something', // or hook
     name: 'checked'
@@ -110,3 +110,3 @@ }
     type: 'toggle',
-    selector: '#something' // or role
+    selector: '#something' // or hook
 }
@@ -144,3 +144,3 @@
     type: 'innerHTML',
-    selector: '#something' // or role
+    selector: '#something' // or hook
 }
@@ -157,3 +157,3 @@ ```
         type: 'booleanClass',
-        selector: '#something', // or role
+        selector: '#something', // or hook
         name: 'active' // (optional) name of class to toggle if different than key name
@@ -163,3 +163,3 @@ },
         type: 'attribute',
-        selector: '#something', // or role
+        selector: '#something', // or hook
         name: 'width'
@@ -183,15 +183,15 @@ }
 
-## binding using `role` attribute
+## binding using `data-hook` attribute
 
-We've started using this convention a lot, rather than using classes and IDs in JS to select elements within a view, we use the `role` attribute. This lets designers edit templates without fear of breaking something by changing a class. It works wonderfully, but the only thing that sucks about that is the syntax of attribute selectors: `[role=some-role]` is a bit annoying to type a million types, and also in JS-land when coding and we see `[` we always assume arrays.
+We've started using this convention a lot, rather than using classes and IDs in JS to select elements within a view, we use the `data-hook` attribute. This lets designers edit templates without fear of breaking something by changing a class. It works wonderfully, but the only thing that sucks about that is the syntax of attribute selectors: `[data-hook=some-hook]` is a bit annoying to type a million types, and also in JS-land when coding and we see `[` we always assume arrays.
 
-I'm proposing that for each of these bindings you can either use `selector` or `role`, so these two would be equivalent:
+So for each of these bindings you can either use `selector` or `hook`, so these two would be equivalent:
 
 ```js
 'model.key': {
-    selector: '[role=my-element]'
+    selector: '[data-hook=my-element]'
 }
 
 'model.key': {
-    role: 'my-element'
+    hook: 'my-element'
 }
@@ -208,3 +208,3 @@
 'model.key': {
-    role: 'role-name'
+    hook: 'hook-name'
 }
@@ -225,3 +225,3 @@ ```
         'model.client_name': {
-            role: 'name'
+            hook: 'name'
         },
@@ -231,3 +231,3 @@ 'model.logo_uri': {
             name: 'src',
-            role: 'icon'
+            hook: 'icon'
         }
@@ -263,5 +263,5 @@ }
         // this one is for one model
-        'person.full_name': '[role=name]',
+        'person.full_name': '[data-hook=name]',
         // this one is for another model
-        'meeting.subject': '[role=subject]'
+        'meeting.subject': '[data-hook=subject]'
     }
@@ -268,0 +268,0 @@ });

test/index.js

@@ -14,3 +14,3 @@ var test = require('tape');
 test('text bindings', function (t) {
-    var el = getEl('<span class="thing" role="hello"></span>');
+    var el = getEl('<span class="thing" data-hook="hello"></span>');
     var bindings = domBindings({
@@ -24,3 +24,3 @@ 'model1': {
             type: 'text',
-            role: 'hello'
+            hook: 'hello'
         }
@@ -30,9 +30,9 @@ });
     bindings.run('model1', null, el, 'hello');
-    t.equal(el.firstChild.textContent, 'hello');
+    t.equal(el.innerHTML, '<span class="thing" data-hook="hello">hello</span>');
 
     bindings.run('model2', null, el, 'string');
-    t.equal(el.firstChild.textContent, 'string');
+    t.equal(el.innerHTML, '<span class="thing" data-hook="hello">string</span>');
 
     bindings.run('model3', null, el, 'third');
-    t.equal(el.firstChild.textContent, 'third');
+    t.equal(el.innerHTML, '<span class="thing" data-hook="hello">third</span>');
 
@@ -43,3 +43,3 @@ t.end();
 test('class bindings', function (t) {
-    var el = getEl('<span class="thing" role="some-role"></span>');
+    var el = getEl('<span class="thing" data-hook="some-hook"></span>');
     var bindings = domBindings({
@@ -64,3 +64,3 @@ 'model': {
 test('attribute bindings', function (t) {
-    var el = getEl('<span class="thing" role="some-role"></span>');
+    var el = getEl('<span class="thing" data-hook="some-hook"></span>');
     var bindings = domBindings({
@@ -85,3 +85,3 @@ 'model': {
 test('attribute array bindings', function (t) {
-    var el = getEl('<span class="thing" role="some-role"></span>');
+    var el = getEl('<span class="thing" data-hook="some-hook"></span>');
     var bindings = domBindings({
@@ -163,3 +163,3 @@ 'model': {
 test('booleanClass bindings', function (t) {
-    var el = getEl('<input type="checkbox" class="thing" role="some-role">');
+    var el = getEl('<input type="checkbox" class="thing" data-hook="some-hook">');
     var bindings = domBindings({
@@ -185,3 +185,3 @@ 'model': {
 test('booleanClass yes/no bindings', function (t) {
-    var el = getEl('<input type="checkbox" class="thing" role="some-role">');
+    var el = getEl('<input type="checkbox" class="thing" data-hook="some-hook">');
     var bindings = domBindings({
@@ -211,3 +211,3 @@ 'model': {
 test('booleanClass array bindings', function (t) {
-    var el = getEl('<input type="checkbox" class="thing" role="some-role">');
+    var el = getEl('<input type="checkbox" class="thing" data-hook="some-hook">');
     var bindings = domBindings({
@@ -236,3 +236,3 @@ 'model': {
 test('booleanClass yes/no array bindings', function (t) {
-    var el = getEl('<input type="checkbox" class="thing" role="some-role">');
+    var el = getEl('<input type="checkbox" class="thing" data-hook="some-hook">');
     var bindings = domBindings({
@@ -271,3 +271,3 @@ 'model': {
 test('booleanAttribute bindings', function (t) {
-    var el = getEl('<input type="checkbox" class="thing" role="some-role">');
+    var el = getEl('<input type="checkbox" class="thing" data-hook="some-hook">');
     var bindings = domBindings({
@@ -293,3 +293,3 @@ 'model': {
 test('booleanAttribute array bindings', function (t) {
-    var el = getEl('<input type="checkbox" class="thing" role="some-role">');
+    var el = getEl('<input type="checkbox" class="thing" data-hook="some-hook">');
     var bindings = domBindings({
@@ -296,0 +296,0 @@ 'model': {

No alert changes

Improved metrics

Total package byte prevSize

26216

increased by0.63%

No dependency changes