Implement element bindings for setting attribute values on model objects.
Showing
2 changed files
with
16 additions
and
12 deletions
... | @@ -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 | ... | ... |
-
Please register or sign in to post a comment