37ae641b by Michael Richards

Implement element bindings for setting attribute values on model objects.

1 parent dc4abbc4
...@@ -2,15 +2,16 @@ ...@@ -2,15 +2,16 @@
2 (function() { 2 (function() {
3 3
4 window.rivets = (function() { 4 window.rivets = (function() {
5 var attr, bindableAttributes, bindings, getInputValue, registerBinding, setAttribute, _fn, _i, _len; 5 var attr, bidirectionalBindings, bindableAttributes, bindings, getInputValue, registerBinding, setAttribute, _fn, _i, _len;
6 registerBinding = function(el, adapter, type, context, keypath) { 6 registerBinding = function(el, adapter, type, context, keypath) {
7 var inputValue;
8 bindings[type](el, adapter.read(context, keypath)); 7 bindings[type](el, adapter.read(context, keypath));
9 adapter.subscribe(context, keypath, function(value) { 8 adapter.subscribe(context, keypath, function(value) {
10 return bindings[type](el, value); 9 return bindings[type](el, value);
11 }); 10 });
12 if (inputValue = getInputValue(el)) { 11 if (_.include(bidirectionalBindings, type)) {
13 return adapter.publish(context, keypath, inputValue); 12 return $(el).bind('change', function() {
13 return adapter.publish(context, keypath, getInputValue(this));
14 });
14 } 15 }
15 }; 16 };
16 setAttribute = function(el, attr, value, mirrored) { 17 setAttribute = function(el, attr, value, mirrored) {
...@@ -29,9 +30,9 @@ ...@@ -29,9 +30,9 @@
29 case 'textarea': 30 case 'textarea':
30 case 'password': 31 case 'password':
31 case 'select-one': 32 case 'select-one':
32 return $(this).val(); 33 return $(el).val();
33 case 'checkbox': 34 case 'checkbox':
34 return $(this).is(':checked'); 35 return $(el).is(':checked');
35 } 36 }
36 }; 37 };
37 bindings = { 38 bindings = {
...@@ -74,6 +75,7 @@ ...@@ -74,6 +75,7 @@
74 return $(el).val(value); 75 return $(el).val(value);
75 } 76 }
76 }; 77 };
78 bidirectionalBindings = ['value', 'checked', 'unchecked', 'selected', 'unselected'];
77 bindableAttributes = ['id', 'class', 'name', 'src', 'href', 'alt', 'title', 'placeholder']; 79 bindableAttributes = ['id', 'class', 'name', 'src', 'href', 'alt', 'title', 'placeholder'];
78 _fn = function(attr) { 80 _fn = function(attr) {
79 return bindings[attr] = function(el, value) { 81 return bindings[attr] = function(el, value) {
......
...@@ -10,8 +10,9 @@ window.rivets = do -> ...@@ -10,8 +10,9 @@ window.rivets = do ->
10 adapter.subscribe context, keypath, (value) -> 10 adapter.subscribe context, keypath, (value) ->
11 bindings[type] el, value 11 bindings[type] el, value
12 12
13 if inputValue = getInputValue el 13 if _.include bidirectionalBindings, type
14 adapter.publish context, keypath, inputValue 14 $(el).bind 'change', ->
15 adapter.publish context, keypath, getInputValue(this)
15 16
16 setAttribute = (el, attr, value, mirrored=false) -> 17 setAttribute = (el, attr, value, mirrored=false) ->
17 if value 18 if value
...@@ -21,8 +22,8 @@ window.rivets = do -> ...@@ -21,8 +22,8 @@ window.rivets = do ->
21 22
22 getInputValue = (el) -> 23 getInputValue = (el) ->
23 switch $(el).attr 'type' 24 switch $(el).attr 'type'
24 when 'text', 'textarea', 'password', 'select-one' then $(this).val() 25 when 'text', 'textarea', 'password', 'select-one' then $(el).val()
25 when 'checkbox' then $(this).is ':checked' 26 when 'checkbox' then $(el).is ':checked'
26 27
27 bindings = 28 bindings =
28 show: (el, value) -> 29 show: (el, value) ->
...@@ -46,6 +47,7 @@ window.rivets = do -> ...@@ -46,6 +47,7 @@ window.rivets = do ->
46 value: (el, value) -> 47 value: (el, value) ->
47 $(el).val value 48 $(el).val value
48 49
50 bidirectionalBindings = ['value', 'checked', 'unchecked', 'selected', 'unselected']
49 bindableAttributes = ['id', 'class', 'name', 'src', 'href', 'alt', 'title', 'placeholder'] 51 bindableAttributes = ['id', 'class', 'name', 'src', 'href', 'alt', 'title', 'placeholder']
50 52
51 for attr in bindableAttributes 53 for attr in bindableAttributes
...@@ -57,11 +59,11 @@ window.rivets = do -> ...@@ -57,11 +59,11 @@ window.rivets = do ->
57 $(el).add($('*', el)).each -> 59 $(el).add($('*', el)).each ->
58 target = this 60 target = this
59 nodeMap = target.attributes 61 nodeMap = target.attributes
60 62
61 if nodeMap.length > 0 63 if nodeMap.length > 0
62 [0..(nodeMap.length - 1)].forEach (n) -> 64 [0..(nodeMap.length - 1)].forEach (n) ->
63 node = nodeMap[n] 65 node = nodeMap[n]
64 66
65 if /^data-/.test node.name 67 if /^data-/.test node.name
66 type = node.name.replace 'data-', '' 68 type = node.name.replace 'data-', ''
67 69
......