Keep a more consistent nomenclature for the main concepts in the code to avoid confusion.
Binding: the actual binding between a model attribute and DOM element. Routine: the function that performs the actual binding to the element. Model: Same as what context object was.
Showing
2 changed files
with
49 additions
and
49 deletions
... | @@ -8,17 +8,17 @@ | ... | @@ -8,17 +8,17 @@ |
8 | 8 | ||
9 | Rivets.Binding = (function() { | 9 | Rivets.Binding = (function() { |
10 | 10 | ||
11 | function Binding(el, type, context, keypath, formatters) { | 11 | function Binding(el, type, model, keypath, formatters) { |
12 | this.el = el; | 12 | this.el = el; |
13 | this.type = type; | 13 | this.type = type; |
14 | this.context = context; | 14 | this.model = model; |
15 | this.keypath = keypath; | 15 | this.keypath = keypath; |
16 | this.formatters = formatters != null ? formatters : []; | 16 | this.formatters = formatters != null ? formatters : []; |
17 | this.bind = __bind(this.bind, this); | 17 | this.bind = __bind(this.bind, this); |
18 | 18 | ||
19 | this.set = __bind(this.set, this); | 19 | this.set = __bind(this.set, this); |
20 | 20 | ||
21 | this.routine = Rivets.bindings[this.type] || attributeBinding(this.type); | 21 | this.routine = Rivets.routines[this.type] || attributeBinding(this.type); |
22 | } | 22 | } |
23 | 23 | ||
24 | Binding.prototype.set = function(value) { | 24 | Binding.prototype.set = function(value) { |
... | @@ -34,17 +34,17 @@ | ... | @@ -34,17 +34,17 @@ |
34 | Binding.prototype.bind = function() { | 34 | Binding.prototype.bind = function() { |
35 | var _ref, | 35 | var _ref, |
36 | _this = this; | 36 | _this = this; |
37 | Rivets.config.adapter.subscribe(this.context, this.keypath, function(value) { | 37 | Rivets.config.adapter.subscribe(this.model, this.keypath, function(value) { |
38 | return _this.set(value); | 38 | return _this.set(value); |
39 | }); | 39 | }); |
40 | if (Rivets.config.preloadData) { | 40 | if (Rivets.config.preloadData) { |
41 | this.set(Rivets.config.adapter.read(this.context, this.keypath)); | 41 | this.set(Rivets.config.adapter.read(this.model, this.keypath)); |
42 | } | 42 | } |
43 | if (_ref = this.type, __indexOf.call(bidirectionals, _ref) >= 0) { | 43 | if (_ref = this.type, __indexOf.call(bidirectionals, _ref) >= 0) { |
44 | return this.el.addEventListener('change', function(e) { | 44 | return this.el.addEventListener('change', function(e) { |
45 | var el; | 45 | var el; |
46 | el = e.target || e.srcElement; | 46 | el = e.target || e.srcElement; |
47 | return Rivets.config.adapter.publish(_this.context, _this.keypath, getInputValue(el)); | 47 | return Rivets.config.adapter.publish(_this.model, _this.keypath, getInputValue(el)); |
48 | }); | 48 | }); |
49 | } | 49 | } |
50 | }; | 50 | }; |
... | @@ -55,9 +55,9 @@ | ... | @@ -55,9 +55,9 @@ |
55 | 55 | ||
56 | Rivets.View = (function() { | 56 | Rivets.View = (function() { |
57 | 57 | ||
58 | function View(el, contexts) { | 58 | function View(el, models) { |
59 | this.el = el; | 59 | this.el = el; |
60 | this.contexts = contexts; | 60 | this.models = models; |
61 | this.bind = __bind(this.bind, this); | 61 | this.bind = __bind(this.bind, this); |
62 | 62 | ||
63 | this.build = __bind(this.build, this); | 63 | this.build = __bind(this.build, this); |
... | @@ -78,7 +78,7 @@ | ... | @@ -78,7 +78,7 @@ |
78 | }; | 78 | }; |
79 | 79 | ||
80 | View.prototype.build = function() { | 80 | View.prototype.build = function() { |
81 | var attribute, context, keypath, node, path, pipes, type, _i, _len, _ref, _results; | 81 | var attribute, keypath, model, node, path, pipes, type, _i, _len, _ref, _results; |
82 | this.bindings = []; | 82 | this.bindings = []; |
83 | _ref = this.el.getElementsByTagName('*'); | 83 | _ref = this.el.getElementsByTagName('*'); |
84 | _results = []; | 84 | _results = []; |
... | @@ -96,9 +96,9 @@ | ... | @@ -96,9 +96,9 @@ |
96 | return pipe.trim(); | 96 | return pipe.trim(); |
97 | }); | 97 | }); |
98 | path = pipes.shift().split('.'); | 98 | path = pipes.shift().split('.'); |
99 | context = this.contexts[path.shift()]; | 99 | model = this.models[path.shift()]; |
100 | keypath = path.join('.'); | 100 | keypath = path.join('.'); |
101 | _results1.push(this.bindings.push(new Rivets.Binding(node, type, context, keypath, pipes))); | 101 | _results1.push(this.bindings.push(new Rivets.Binding(node, type, model, keypath, pipes))); |
102 | } else { | 102 | } else { |
103 | _results1.push(void 0); | 103 | _results1.push(void 0); |
104 | } | 104 | } |
... | @@ -160,7 +160,7 @@ | ... | @@ -160,7 +160,7 @@ |
160 | 160 | ||
161 | bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected']; | 161 | bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected']; |
162 | 162 | ||
163 | Rivets.bindings = { | 163 | Rivets.routines = { |
164 | checked: stateBinding('checked'), | 164 | checked: stateBinding('checked'), |
165 | selected: stateBinding('selected'), | 165 | selected: stateBinding('selected'), |
166 | disabled: stateBinding('disabled'), | 166 | disabled: stateBinding('disabled'), |
... | @@ -201,15 +201,15 @@ | ... | @@ -201,15 +201,15 @@ |
201 | } | 201 | } |
202 | return _results; | 202 | return _results; |
203 | }, | 203 | }, |
204 | register: function(routine, routineFunction) { | 204 | register: function(identifier, routine) { |
205 | return Rivets.bindings[routine] = routineFunction; | 205 | return Rivets.routines[identifier] = routine; |
206 | }, | 206 | }, |
207 | bind: function(el, contexts) { | 207 | bind: function(el, models) { |
208 | var view; | 208 | var view; |
209 | if (contexts == null) { | 209 | if (models == null) { |
210 | contexts = {}; | 210 | models = {}; |
211 | } | 211 | } |
212 | view = new Rivets.View(el, contexts); | 212 | view = new Rivets.View(el, models); |
213 | view.bind(); | 213 | view.bind(); |
214 | return view; | 214 | return view; |
215 | } | 215 | } | ... | ... |
... | @@ -9,46 +9,46 @@ Rivets = {} | ... | @@ -9,46 +9,46 @@ Rivets = {} |
9 | # A single binding between a model attribute and a DOM element. | 9 | # A single binding between a model attribute and a DOM element. |
10 | class Rivets.Binding | 10 | class Rivets.Binding |
11 | # All information about the binding is passed into the constructor; the DOM | 11 | # All information about the binding is passed into the constructor; the DOM |
12 | # element, the type of binding, the context object and the keypath at which to | 12 | # element, the routine identifier, the model object and the keypath at which |
13 | # listen to for changes. | 13 | # to listen for changes. |
14 | constructor: (@el, @type, @context, @keypath, @formatters = []) -> | 14 | constructor: (@el, @type, @model, @keypath, @formatters = []) -> |
15 | @routine = Rivets.bindings[@type] || attributeBinding @type | 15 | @routine = Rivets.routines[@type] || attributeBinding @type |
16 | 16 | ||
17 | # Sets a value for this binding. Basically just runs the routine on the | 17 | # Sets the value for the binding. This Basically just runs the binding routine |
18 | # element with a suplied value and applies any formatters. | 18 | # with the suplied value and applies any formatters. |
19 | set: (value) => | 19 | set: (value) => |
20 | for formatter in @formatters | 20 | for formatter in @formatters |
21 | value = Rivets.config.formatters[formatter] value | 21 | value = Rivets.config.formatters[formatter] value |
22 | 22 | ||
23 | @routine @el, value | 23 | @routine @el, value |
24 | 24 | ||
25 | # Subscribes to the context object for changes on the specific keypath. | 25 | # Subscribes to the model for changes at the specified keypath. Bi-directional |
26 | # Conditionally also does the inverse and listens to the element for changes | 26 | # routines will also listen for changes on the element to propagate them back |
27 | # to propogate back to the context object. | 27 | # to the model. |
28 | bind: => | 28 | bind: => |
29 | Rivets.config.adapter.subscribe @context, @keypath, (value) => @set value | 29 | Rivets.config.adapter.subscribe @model, @keypath, (value) => @set value |
30 | 30 | ||
31 | if Rivets.config.preloadData | 31 | if Rivets.config.preloadData |
32 | @set Rivets.config.adapter.read @context, @keypath | 32 | @set Rivets.config.adapter.read @model, @keypath |
33 | 33 | ||
34 | if @type in bidirectionals | 34 | if @type in bidirectionals |
35 | @el.addEventListener 'change', (e) => | 35 | @el.addEventListener 'change', (e) => |
36 | el = e.target or e.srcElement | 36 | el = e.target or e.srcElement |
37 | Rivets.config.adapter.publish @context, @keypath, getInputValue el | 37 | Rivets.config.adapter.publish @model, @keypath, getInputValue el |
38 | 38 | ||
39 | # Parses and stores the binding data for an entire view binding. | 39 | # A collection of bindings for a parent element. |
40 | class Rivets.View | 40 | class Rivets.View |
41 | # Takes the parent DOM element as well as all the context objects that are to | 41 | # The parent DOM element and the model objects for binding are passed into the |
42 | # be binded to the view. | 42 | # constructor. |
43 | constructor: (@el, @contexts) -> | 43 | constructor: (@el, @models) -> |
44 | @build() | 44 | @build() |
45 | 45 | ||
46 | # The regular expression used to match Rivets.js data binding attributes. | 46 | # Regular expression used to match binding attributes. |
47 | bindingRegExp: => | 47 | bindingRegExp: => |
48 | prefix = Rivets.config.prefix | 48 | prefix = Rivets.config.prefix |
49 | if prefix then new RegExp("^data-#{prefix}-") else /^data-/ | 49 | if prefix then new RegExp("^data-#{prefix}-") else /^data-/ |
50 | 50 | ||
51 | # Parses and builds new Rivets.Binding instances for the data bindings. | 51 | # Builds the Rivets.Binding instances for the view. |
52 | build: => | 52 | build: => |
53 | @bindings = [] | 53 | @bindings = [] |
54 | 54 | ||
... | @@ -58,10 +58,10 @@ class Rivets.View | ... | @@ -58,10 +58,10 @@ class Rivets.View |
58 | type = attribute.name.replace @bindingRegExp(), '' | 58 | type = attribute.name.replace @bindingRegExp(), '' |
59 | pipes = attribute.value.split('|').map (pipe) -> pipe.trim() | 59 | pipes = attribute.value.split('|').map (pipe) -> pipe.trim() |
60 | path = pipes.shift().split '.' | 60 | path = pipes.shift().split '.' |
61 | context = @contexts[path.shift()] | 61 | model = @models[path.shift()] |
62 | keypath = path.join '.' | 62 | keypath = path.join '.' |
63 | 63 | ||
64 | @bindings.push new Rivets.Binding node, type, context, keypath, pipes | 64 | @bindings.push new Rivets.Binding node, type, model, keypath, pipes |
65 | 65 | ||
66 | # Binds all of the current bindings for this view. | 66 | # Binds all of the current bindings for this view. |
67 | bind: => | 67 | bind: => |
... | @@ -86,11 +86,11 @@ stateBinding = (attr, inverse = false) -> (el, value) -> | ... | @@ -86,11 +86,11 @@ stateBinding = (attr, inverse = false) -> (el, value) -> |
86 | binding el, if inverse is !value then attr else false | 86 | binding el, if inverse is !value then attr else false |
87 | 87 | ||
88 | # Bindings that should also be observed for changes on the DOM element in order | 88 | # Bindings that should also be observed for changes on the DOM element in order |
89 | # to propogate those changes back to the model object. | 89 | # to propagate those changes back to the model object. |
90 | bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected'] | 90 | bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected'] |
91 | 91 | ||
92 | # Core binding routines. | 92 | # Core binding routines. |
93 | Rivets.bindings = | 93 | Rivets.routines = |
94 | checked: | 94 | checked: |
95 | stateBinding 'checked' | 95 | stateBinding 'checked' |
96 | selected: | 96 | selected: |
... | @@ -120,20 +120,20 @@ Rivets.config = | ... | @@ -120,20 +120,20 @@ Rivets.config = |
120 | 120 | ||
121 | # The rivets module. This is the public interface that gets exported. | 121 | # The rivets module. This is the public interface that gets exported. |
122 | rivets = | 122 | rivets = |
123 | # Used to set configuration options. | 123 | # Used for setting configuration options. |
124 | configure: (options={}) -> | 124 | configure: (options={}) -> |
125 | for property, value of options | 125 | for property, value of options |
126 | Rivets.config[property] = value | 126 | Rivets.config[property] = value |
127 | 127 | ||
128 | # Registers a new binding routine function that can be used immediately in the | 128 | # Registers a new binding routine that can be used immediately in views. This |
129 | # view. This is what is used to add custom data bindings. | 129 | # is used for adding custom binding routines. |
130 | register: (routine, routineFunction) -> | 130 | register: (identifier, routine) -> |
131 | Rivets.bindings[routine] = routineFunction | 131 | Rivets.routines[identifier] = routine |
132 | 132 | ||
133 | # Binds a set of context objects to the specified DOM element. Returns a new | 133 | # Binds a set of model objects to a parent DOM element. Returns a Rivets.View |
134 | # Rivets.View instance. | 134 | # instance. |
135 | bind: (el, contexts = {}) -> | 135 | bind: (el, models = {}) -> |
136 | view = new Rivets.View(el, contexts) | 136 | view = new Rivets.View(el, models) |
137 | view.bind() | 137 | view.bind() |
138 | view | 138 | view |
139 | 139 | ... | ... |
-
Please register or sign in to post a comment