Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 627 lines (446 sloc) 19.636 kB
376574a @derickbailey initial commit / structure
derickbailey authored
1 # Backbone.ModelBinding
2
239cc50 @derickbailey version bump and starting to work on api for unbind
derickbailey authored
3 Convention-based, awesome model binding for [Backbone.js](http://documentcloud.github.com/backbone)
376574a @derickbailey initial commit / structure
derickbailey authored
4
2dd1d19 @derickbailey correct name in the link to the inspiring post
derickbailey authored
5 Inspired by [Brad Phelan](http://xtargets.com/2011/06/11/binding-model-attributes-to-form-elements-with-backbone-js/),
239cc50 @derickbailey version bump and starting to work on api for unbind
derickbailey authored
6 Knockout.js' data-binding capabilities, and [Brandon Satrom](http://userinexperience.com/?p=633)'s
7 work with Knockout.
153f007 @derickbailey link to blog post that inspired this
derickbailey authored
8
004fd10 @derickbailey updating readme with example and cautionary info
derickbailey authored
9 ## Getting Started
000549a @derickbailey note on not being ready for use
derickbailey authored
10
dfc805a @derickbailey updating readme with info about prerequisites, etc
derickbailey authored
11 It's easy to get up and running. You only need to have Backbone (including underscore.js -
12 a requirement for Backbone) and jQuery in your page before including the backbone.modelbining
13 plugin.
000549a @derickbailey note on not being ready for use
derickbailey authored
14
dfc805a @derickbailey updating readme with info about prerequisites, etc
derickbailey authored
15 ### Prerequisites
16
17 * Backbone.js v0.5.1 or higher
18 * jQuery v1.6.2 or higher
19
20 This is a plugin for Backbone.js and is built and tested against Backbone v0.5.1. It also uses jQuery
21 to perform most of the bindng and manipulations, and is built and tested against v1.6.1. However, I am
22 currently using this plugin in a production application with Backbone v0.3.3 and jQuery v1.5.1.
23
24 At this point, I make no guarantees of it working with any version of Backbone or jQuery,
25 other than what it has been built and tested against. It works for me, so it may work for you
26 with versions other than what is stated
27
28 ### Get The ModelBinding Plugin
29
30 Download the `backbone.modelbinding.js` file from this github repository and copy it into
31 your javascripts folder. Add the needed `<script>` tag to bring the plugin into any page
32 that wishes to use it. Be sure to include the modelbinding file _after_ the backbone.js file.
33
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
34 ### Model Binding
7f2301e @derickbailey added basic support for htmlBindings - to go from the model's fields …
derickbailey authored
35
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
36 The model binding code is executed with a call to `Backbone.ModelBinding.bind(view)`. There are
8755836 @derickbailey updated the documentation concerning when to call the model binding code
derickbailey authored
37 several places that it can be called from, depending on your circumstances.
38
39 All of the element binding happens within the context of the view's `el`, therefore you must
40 call the model binding code after your view's `el` has been populated with the elements that
41 will be bound to.
42
43 #### Binding After Rendering
44
45 If your view modifies the html contents of the view's `el` in the `render` method, you should
46 call the model binding after the modifications are made:
004fd10 @derickbailey updating readme with example and cautionary info
derickbailey authored
47
48 ````
49 SomeView = Backbone.View.extend({
7f2301e @derickbailey added basic support for htmlBindings - to go from the model's fields …
derickbailey authored
50 render: function(){
51 // ... render your form here
8755836 @derickbailey updated the documentation concerning when to call the model binding code
derickbailey authored
52 $(this.el).html("... some html and content goes here ... ");
7f2301e @derickbailey added basic support for htmlBindings - to go from the model's fields …
derickbailey authored
53
8755836 @derickbailey updated the documentation concerning when to call the model binding code
derickbailey authored
54 // execute the model bindings
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
55 Backbone.ModelBinding.bind(this);
004fd10 @derickbailey updating readme with example and cautionary info
derickbailey authored
56 }
57 });
58 ````
59
8755836 @derickbailey updated the documentation concerning when to call the model binding code
derickbailey authored
60 #### Binding A View That Does Not Render
61
62 If, however, your view has an `el` that represents an existing element in your html, and the
63 contents of the `el` are not modified during a call to `render`, then you can make the call to
64 the model binding code in the initializer or anywhere else.
65
66 ````
67 <form id="some-form">
68 Name: <input id="name">
69 </form>
70 ````
71
72 ````
73 FormView = Backbone.View.extend({
74 el: "#some-form",
75
76 initialize: function(){
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
77 Backbone.ModelBinding.bind(this);
8755836 @derickbailey updated the documentation concerning when to call the model binding code
derickbailey authored
78 }
79 });
80 ````
81
82 #### Binding From Outside A View
83
84 There is no requirement for the model binding code to be called from within a view directly.
85 You can bind the view from external code, like this:
86
87 ````
88 FormView = Backbone.View.extend({
89 el: "#some-form",
90 });
91
92 formView = new FormView();
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
93 Backbone.ModelBinding.bind(formView);
94 ````
95
96 ### Model Unbinding
97
98 When your view has completed its work and is ready to be removed from the DOM, you not only
99 need to unbnd your view's events (handled through the view's `remove` method, typically), you
100 also need to unbind the model events that are bound in the view.
101
102 Backbone.ModelBinding can unbind its own events through a simple call to
103 `Backbone.ModelBinding.unbind(view)`. If you do not call this method when your view is being
104 closed / removed / cleaned up, then you may end up with memory leaks and zombie views that
105 are still responding to model change events.
106
107 ````
108 FormView = Backbone.View.extend({
109 el: "#some-form",
110
111 initialize: function(){
112 Backbone.ModelBinding.bind(this);
113 },
114
115 close: function(){
116 this.remove();
117 this.unbind();
118 Backbone.ModelBinding.unbind(this);
119 }
120 });
8755836 @derickbailey updated the documentation concerning when to call the model binding code
derickbailey authored
121 ````
122
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
123 ## Convention Bindings
e4932c6 @derickbailey updated readme to talk about convention binding
derickbailey authored
124
125 Automatic bi-directional binding between your form input and your model.
126
127 The convention based binding requires no additional configuration or code in your
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
128 view, other than calling the `Backbone.ModelBinding.bind(this);` as noted above.
e4932c6 @derickbailey updated readme to talk about convention binding
derickbailey authored
129 With the conventions binding, your `<input>` fields will be bound to the views model
130 by the id of the input.
131
132 For example:
133
134 ````
135 // something.html
136
137 <input id='name'>
138
139 // something.js
140
141 SomeModel = Backbone.Model.extend();
142
143 SomeView = Backbone.View.extend({
144 render: function(){
145 // ... render your form here
146
147 // execute the defined bindings
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
148 Backbone.ModelBinding.bind(this);
e4932c6 @derickbailey updated readme to talk about convention binding
derickbailey authored
149 }
150 });
151
152 model = new SomeModel();
153 view = new SomeView({model: model});
154
155 model.set({name: "some name"});
156
157 ````
158
159 In this example, when `model.set` is called to set the name, "some name" will appear
160 in the `#name` input field. Similarly, when the `#name` input field is changed, the
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
161 value entered into that field will be sent to the model's `name` property.
e4932c6 @derickbailey updated readme to talk about convention binding
derickbailey authored
162
bb8d234 @derickbailey documented data-bind
derickbailey authored
163 ## Data-Bind Attributes
57ed5b9 @derickbailey updated docs to list supported input types
derickbailey authored
164
bb8d234 @derickbailey documented data-bind
derickbailey authored
165 Backbone.ModelBinding supports Knockout-style data-bind attributes on any arbitrary
166 HTML element. These bindings will populate any attribute, the text, or HTML contents
167 of an HTML element based on your configurations. This is particularly useful when a
168 model that is being edited is also being displayed elsewhere on the screen.
169
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
170 To bind an element to a model's properties, add a `data-bind` attribute to the element
171 and specify what should be updated with which model property using a `elementAttr modelAttr`
bb8d234 @derickbailey documented data-bind
derickbailey authored
172 format. For example `<span data-bind="text name">` will update the span's text with
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
173 the model's name property, when the model's name changes.
bb8d234 @derickbailey documented data-bind
derickbailey authored
174
175 ````
176 <form>
177 <input type="text" id="name">
178 </form>
179 Name: <span data-bind="text name">
180
181 SomeView = Backbone.View.extend({
182 // ...
183
184 render: function(){
185 // ...
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
186 Backbone.ModelBinding.bind(this);
bb8d234 @derickbailey documented data-bind
derickbailey authored
187 }
188 });
189
190 someModel = new SomeModel();
191 someView = new SomeView({model: someModel});
192 ````
193
194 In this example, the model's `name` will be updated when you type into the text box
195 and then tab or click away from it (to fire the change event). When the model's `name`
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
196 property is updated, the `data-bind` convention will pick up the change and set
bb8d234 @derickbailey documented data-bind
derickbailey authored
197 the text of the `span` to the model's name.
198
b5e4c0c @derickbailey updated readme and release note for v0.3.7's multiple data-bind
derickbailey authored
199 ### Data-Bind Multiple Attributes
200
201 Multiple attributes can be specified for a single element's `data-bind` by separating
202 each with a `;` (semi-colon). For example:
203
204 ````
205 <form>
206 <input type="text" id="name">
207 </form>
208 Name: <span data-bind="text name; class name">
209
210 SomeView = Backbone.View.extend({
211 // ...
212
213 render: function(){
214 // ...
215 Backbone.ModelBinding.bind(this);
216 }
217 });
218
219 someModel = new SomeModel();
220 someView = new SomeView({model: someModel});
221 ````
222
223 In this example, both the text and the css class will be updated when you change
224 the name input. You can data-bind as many attributes as you need, in this manner.
225
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
226 ### Special Cases For data-bind
227
228 There are several special cases for the data-bind attribute. These allow a little more
229 functionality than just setting an attribute on an element.
230
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
231 * (default) - if you only specify the model property, defaults to the text of the html element
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
232 * text - replace the text contents of the element
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
233 * html - replace the html contents of the element
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
234 * enabled - enable or disable the html element
235
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
236 #### (default)
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
237
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
238 If you only specify the model's property in the data-bind attribute, then the data-bind
239 will bind the value of that model property to the `text` of the html element.
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
240
241 ````
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
242 <div data-bind="name"/>
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
243 ````
244
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
245 See the document for data-bind text, below.
246
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
247 #### text
248
249 If you set the data-bind attribute to use `text`, it will replace the text contents of the
250 html element instead of just setting an element attribute.
251
252 ````
253 <div id="someDiv" data-bind="text someProperty"></div>
254
255
256 someModel.set({someProperty: "some value"});
257 ````
258
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
259 #### html
260
261 If you set the data-bind attribute to use `html`, it will replace the entire
262 inner html of the html element, instead of just setting an element attribute.
263
264 ````
265 <div id="someDiv" data-bind="html someProperty"></div>
266
267
268 someModel.set({someProperty: "some value"});
269 ````
270
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
271 #### enabled
272
273 This special case breaks the html element standard of using a `disabled` attribute, specifically
274 to inver the logic used for enabling / disabling an element, to keep the data-bind attribute
275 clean and easy to read.
276
277 If you have a model with a property that indicates a negative state, such as `invalid`, then you
278 can use a data-bind attribute of `disabled`:
279
280 ````
281 <button id="someButton" data-bind="disabled invalid"></div>
282
283
284 someModel.set({invalid: true});
285 ````
286
287 However, some developers prefer to use positive state, such as `isValid`. In this case, setting
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
288 the disabled attribute to the model's isValid property would result in the button being disabled
977f674 @derickbailey docs for data-bind='enabled ...' and spec to prove data-bind='disable…
derickbailey authored
289 when the model is valid and enabled when the model is not valid. To correct this, a special case
290 has been added to enable and disable an element with `enabled`.
291
292 ````
293 <button id="someButton" data-bind="enabled isValid"></div>
294
295
296 someModel.set({isValid: false});
297 ````
298
299 This will disable the button when the model is invalid and enable the button when the model is
300 valid.
301
8872555 @derickbailey bumped version to 0.3.3, docs and release notes
derickbailey authored
302 #### display
303
304 This allows you to specify that an element should be shown or hidden by setting the css
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
305 of the element according to the value of the model properties specified.
8872555 @derickbailey bumped version to 0.3.3, docs and release notes
derickbailey authored
306
307 ````
308 <div data-bind="display isValid" />
309
310 someModel.set({isValid: false});
311 ````
312
313 When the model's property is set to false, the HTML element's `display` css will be set
314 to `none`. When the model's property is set to true, the HTML element's `display` css
315 will be set to `block`.
316
317 #### hidden
318
319 This is the inverse of `display`.
320
321 ````
322 <div data-bind="hidden isValid" />
323
324 someModel.set({isValid: true});
325 ````
326
327 When the model's property is set to false, the HTML element's `display` css will be set
328 to `block`. When the model's property is set to true, the HTML element's `display` css
329 will be set to `none`.
330
8c02f6c @derickbailey added docs and release notes for data-bind substitutions
derickbailey authored
331 ### Data-Bind Substitutions
332
333 If a model's property is `unset`, the data-bind may not update correctly when using `text` or `html`
2c087d3 @derickbailey updated release notes for v0.3.7
derickbailey authored
334 as the bound attribute of the element.
8c02f6c @derickbailey added docs and release notes for data-bind substitutions
derickbailey authored
335
336 ````
337 <div data-bind="text something"></div>
338
339 model.set({something: "whatever"});
340 model.unset("something");
341 ````
342
343 The result will be a div with it's text set to "". this is handled through the data-bind's
344 substitutions for undefined values. The default substitution is to replace an undefined
2c087d3 @derickbailey updated release notes for v0.3.7
derickbailey authored
345 value with an empty string. However, this can be per attribute:
8c02f6c @derickbailey added docs and release notes for data-bind substitutions
derickbailey authored
346
347 ````
348 <div data-bind="text something"></div>
349 <div data-bind="html something"></div>
350
351 Backbone.ModelBinding.Configuration.dataBindSubst({
352 text: "undefined. setting text to this",
353 html: "&nbsp;"
354 });
355 model.set({something: "whatever"});
356 model.unset("something");
357 ````
358
359 The result of this example will be a div that displays "undefined. setting the text to this" and a
360 div whose contents is a single space, instead of being empty.
361
b2fef6d @derickbailey removed the formBinding code. it wasn't that useful and the configura…
derickbailey authored
362 ## Form Binding Conventions
bb8d234 @derickbailey documented data-bind
derickbailey authored
363
364 The following form input types are supported by the form convention binder:
57ed5b9 @derickbailey updated docs to list supported input types
derickbailey authored
365
366 * text
367 * textarea
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
368 * password
57ed5b9 @derickbailey updated docs to list supported input types
derickbailey authored
369 * checkbox
e4417b1 @derickbailey updated documentation to discuss the behavior of select box convention
derickbailey authored
370 * select
371 * radio button groups
372
373 Radio buttons are group are assumed to be grouped by the `name` attribute of the
374 radio button items.
375
376 Select boxes will populate 2 separate fields into the model that they are bound to.
377 The standard `#fieldid` will be populated with the selected value. An additional
378 `{#fieldid}_text` will be populated with the text from the selected item. For example,
379 a selected option of
380
381 ````
382 <select id='company'>
383 <option value="foo_bar">Foo Bar Widgets, Inc.</option>
384 ...
385 </select>
386 ````
387
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
388 will populate the `company` property of the model with "foo_bar", and will populate
389 the `company_text` property of the model with "Foo Bar Widgets, Inc."
57ed5b9 @derickbailey updated docs to list supported input types
derickbailey authored
390
391 There is no support for hidden fields at the moment, because there is no 'change' event
392 that jQuery can listen to on a hidden field.
e4932c6 @derickbailey updated readme to talk about convention binding
derickbailey authored
393
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
394 ### Configuring The Bound Attributes
7f2301e @derickbailey added basic support for htmlBindings - to go from the model's fields …
derickbailey authored
395
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
396 The convention binding system allows you to specify the attribute to use for the convention, by
397 the input type. The default configuration is:
004fd10 @derickbailey updating readme with example and cautionary info
derickbailey authored
398
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
399 ```
400 {
401 text: "id",
402 textarea: "id",
403 password: "id",
404 radio: "name",
405 checkbox: "id",
406 select: "id"
407 }
004fd10 @derickbailey updating readme with example and cautionary info
derickbailey authored
408 ````
409
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
410 You can override this configuration and use any attribute you wish, by specifying any or all of
411 these input types when you call the model binding. This is useful when you have field ids that
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
412 do not match directly to the model properties.
b3f6e8e @derickbailey updated documentation to discuss setting all binding attributes
derickbailey authored
413
414 #### Override All Element Binding Attributes
415
416 The following will use use the `class` attribute's value as the binding for all input field:
417
418 ````
419 SomeView = Backbone.View.extend({
420 render: function(){
421 // ... some rendering here
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
422 Backbone.ModelBinding.bind(this, { all: "class" });
b3f6e8e @derickbailey updated documentation to discuss setting all binding attributes
derickbailey authored
423 }
424 });
425
426 <input type="text" id="the_model_name" class="name">
427 ````
428
429 If the same convention needs to be used throughout an application, and not just withing a single
430 view, the configuration can be set at a global level:
431
432 ````
433 Backbone.ModelBinding.Configuration.configureAllBindingAttributes({all: "class"});
434 ````
435
436 #### Override Individual Element Binding Attributes
437
438 The following will use a `modelAttr` attribute value as the convention for text boxes, only.
7f2301e @derickbailey added basic support for htmlBindings - to go from the model's fields …
derickbailey authored
439
440 ````
441 SomeView = Backbone.View.extend({
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
442 render: function(){
443 // ... some rendering here
2c8eb06 @derickbailey documentation for unbind method
derickbailey authored
444 Backbone.ModelBinding.bind(this, { text: "modelAttr" });
7f2301e @derickbailey added basic support for htmlBindings - to go from the model's fields …
derickbailey authored
445 }
446 });
447
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
448 <input type="text" id="the_model_name" modelAttr="name">
449 ````
450
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
451 When this text box has it's value changed, the model's `name` property will be populated with
47e4cbc @derickbailey updated the readme to talk about the configuration options for the co…
derickbailey authored
452 the value instead of `the_model_name`.
404d763 @derickbailey note about htmlBindings
derickbailey authored
453
1fe9132 @derickbailey updated readme to discuss global config
derickbailey authored
454 If the same convention needs to be used throughout an application, and not just withing a single
455 view, the configuration can be set at a global level:
456
457 ````
650e27a @derickbailey moved glocal attribute binding to the Configuration object
derickbailey authored
458 Backbone.ModelBinding.Configuration.configureBindingAttributes({text: "modelAttr"});
1fe9132 @derickbailey updated readme to discuss global config
derickbailey authored
459 ````
460
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
461 Now all text boxes will update the model property specified in the text box's `modelAttr`.
1fe9132 @derickbailey updated readme to discuss global config
derickbailey authored
462
bb8d234 @derickbailey documented data-bind
derickbailey authored
463 ## Pluggable Conventions
c3433dd @derickbailey spec to show that you can add your own conventions. documentation on …
derickbailey authored
464
465 The convention based bindings are pluggable. Each of the existing form input types can have it's
466 convention replaced and you can add your own conventions for input types not currently handled,
467 etc.
468
469 To replace a convention entirely, you need to supply a json document that has two pieces of
470 information: a jQuery selector string and an object with a `bind` method. Place the convention
471 in the `Backbone.ModelBinding.Conventions` and it will be picked up and executed. The `bind`
472 method receives three parameters: the jQuery selector you specified, the Backbone view, and
473 the model being bound.
474
4ea0020 @derickbailey updated the documentation for convention building
derickbailey authored
475 You can replace the handler of an existing convention. For example, this will set the
c3433dd @derickbailey spec to show that you can add your own conventions. documentation on …
derickbailey authored
476 value of a textbox called `#name` to some text, instead of doing any real binding.
477
478 ````
479 var nameSettingsHandler = {
480 bind: function(selector, view, model){
481 view.$("#name").val("a custom convention supplied this name");
482 }
483 };
484
485 Backbone.ModelBinding.Conventions.text.handler = nameSettingsHandler;
486 ````
487
4ea0020 @derickbailey updated the documentation for convention building
derickbailey authored
488 You can also create your own conventions that do just about anything you want. Here's an example
489 that modifies the contents of `<p>` tags:
490
491 ````
492 var PConvention = {
493 selector: "p",
494 handler: {
495 bind: function(selector, view, model){
496 view.$(selector).each(function(index){
497 var name = model.get("name");
498 $(this).html(name);
499 });
500 }
501 }
502 };
503
504 Backbone.ModelBinding.Conventions.paragraphs = PConvention;
505 ````
506
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
507 This example will find all `<p>` tags in the view and render the `name` property from the model
4ea0020 @derickbailey updated the documentation for convention building
derickbailey authored
508 into that paragraph, replacing all other text. Note that the name of the convention is set to
509 `paragraphs` when added to the conventions. This name did not exist prior to this assignment, so
510 the convention was added. If you assign a convention to an existing name, you will replace that
511 convention.
512
513 The list of existing conventions includes:
61d8847 @derickbailey updated release notes for v0.3.5
derickbailey authored
514
4ea0020 @derickbailey updated the documentation for convention building
derickbailey authored
515 * text
516 * password
517 * radio
518 * checkbox
519 * select
520 * textarea
bb8d234 @derickbailey documented data-bind
derickbailey authored
521 * formbinding
522 * databind
4ea0020 @derickbailey updated the documentation for convention building
derickbailey authored
523
c3433dd @derickbailey spec to show that you can add your own conventions. documentation on …
derickbailey authored
524 For fully functional, bi-directional binding convention examples, check out the source code
525 to Backbone.ModelBinding in the `backbone.modelbinding.js` file.
126af8d @derickbailey adding release notes, retroactive
derickbailey authored
526
527 ## Release Notes
528
9fa80a5 @derickbailey bumped version to v0.3.8, with release notes and minified
derickbailey authored
529 ### v0.3.8
530
531 * Fix for Internet Explorer not having a `trim` method on strings
532
b5e4c0c @derickbailey updated readme and release note for v0.3.7's multiple data-bind
derickbailey authored
533 ### v0.3.7
534
535 * Data-bind multiple attributes for a single element
2c087d3 @derickbailey updated release notes for v0.3.7
derickbailey authored
536 * Default data-bind substitutaion to '' for all attributes
b5e4c0c @derickbailey updated readme and release note for v0.3.7's multiple data-bind
derickbailey authored
537
15d2337 @derickbailey release notes for v0.3.6
derickbailey authored
538 ### v0.3.6
539
540 * Fixed a bug that prevented `<input>` elements with no `type` attribute from being bound
541
61d8847 @derickbailey updated release notes for v0.3.5
derickbailey authored
542 ### v0.3.5
543
544 * Fixed a bug in configuring the binding attribute for textarea elements
545
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
546 ### v0.3.4
547
548 * Data-bind defaults to the html element's `text` if you only specify the model property: `data-bind="name"`
549 * Fixed issue with binding 1 / 0 to checkboxes (truthy / falsy values)
550
8872555 @derickbailey bumped version to 0.3.3, docs and release notes
derickbailey authored
551 ### v0.3.3
552
553 * Added data-bind attribute for setting an HTML element's `display` css
554 * Added inserve of data-bind `display` as data-bind `hidden`
555 * Corrected issue with binding a model's property to a checkbox, when the property is false
556
8c02f6c @derickbailey added docs and release notes for data-bind substitutions
derickbailey authored
557 ### v0.3.2
558
559 * Data-bind substitutions - lets you replace "undefined" with another, set value, when using data-bind
560
0d7b5d5 @derickbailey spec to fix data-bind issue with unsetting a model property
derickbailey authored
561 ### v0.3.1
562
1e051c1 @derickbailey defaulting the data-bind to update text of the html element if no att…
derickbailey authored
563 * Corrected issue with `unset`ing a model property, in the data-bind convention
0d7b5d5 @derickbailey spec to fix data-bind issue with unsetting a model property
derickbailey authored
564
63f3c92 @derickbailey release notes for v0.3.0
derickbailey authored
565 ### v0.3.0
566
0b009b6 @derickbailey updated release notes for v0.3.0
derickbailey authored
567 * **Breaking Change:** Changed the `Backbone.ModelBinding.call(view)` method signature to `Backbone.ModelBinding.bind(view)`
568 * Added ability to unbind model binding with `unbind` method, to prevent memory leaks and zombie forms
437566d @derickbailey added minified version to the repo
derickbailey authored
569 * Added backbone.modelbinding.min.js to the repository, compiled with
570 [Google's Closure Compiler Service](http://closure-compiler.appspot.com/home "Google's Closure Compiler Service")
0b009b6 @derickbailey updated release notes for v0.3.0
derickbailey authored
571 * Updated the selectors used for the conventions. Text inputs are now found with "input:text", which should
572 select all text inputs, even without a `type='text'` attribute (though this seems to be buggy in jQuery
573 v1.6.2)
574 * Significant internal restructuring of code
63f3c92 @derickbailey release notes for v0.3.0
derickbailey authored
575
e36b828 @derickbailey added release notes for v0.2.4
derickbailey authored
576 ### v0.2.4
577
578 * data-bind will bind the model's value immediately instead of waiting for the model's value to change
579 * support `enabled` functionality for data-bind: `data-bind="enabled isValid"`
580 * documented existing support for data-bind `disabled`: `data-bind="disabled invalid"`
581
126af8d @derickbailey adding release notes, retroactive
derickbailey authored
582 ### v0.2.3
583
584 * Fixes for 'falsey' value bindings
585 * Update the docs to include when and where to call the model bindings
586
587 ### v0.2.2
588
589 * Making some global vars not global
590
591 ### v0.2.1
592
593 * Configuration to easily set all binding attributes for all elements
594 * Fix for IE
595 * Making some global vars not global
596
597 ### v0.1.0 - v0.2.0
598
599 * Added data-bind convention
600 * Added configuration options
601 * Conventions for all form input types
602 * Removed formBinding code
603 * Removed htmlBinding code
604 * Significant internal code cleanup and restructuring
c3433dd @derickbailey spec to show that you can add your own conventions. documentation on …
derickbailey authored
605
004fd10 @derickbailey updating readme with example and cautionary info
derickbailey authored
606 # Legal Mumbo Jumbo (MIT License)
376574a @derickbailey initial commit / structure
derickbailey authored
607
11a2e01 @derickbailey added copyright and license notice. cleaned up the way the code execu…
derickbailey authored
608 Copyright (c) 2011 Derick Bailey, Muted Solutions, LLC
376574a @derickbailey initial commit / structure
derickbailey authored
609
610 Permission is hereby granted, free of charge, to any person obtaining a copy
611 of this software and associated documentation files (the "Software"), to deal
612 in the Software without restriction, including without limitation the rights
613 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
614 copies of the Software, and to permit persons to whom the Software is
615 furnished to do so, subject to the following conditions:
616
617 The above copyright notice and this permission notice shall be included in
618 all copies or substantial portions of the Software.
619
620 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
621 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
622 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
623 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
624 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
625 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
626 THE SOFTWARE.
Something went wrong with that request. Please try again.