StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I think what may be causing you to think that this code may be redundant is thinking that this code is adding a 'Model' at this step. Per your statement: "The guide also tells me to add a model as follows:" </p> <p>However,</p> <p>The code that is used to represent your Model is still the same:</p> <pre><code> Todos.Todo = DS.Model.extend({ title: DS.attr('string'), isCompleted: DS.attr('boolean') }); </code></pre> <p>And your fixture data that uses that Model is still the same:</p> <pre><code>Todos.Todo.FIXTURES = [ { id: 1, title: 'Learn Ember.js', isCompleted: true }, { id: 2, title: '...', isCompleted: false }, { id: 3, title: 'Profit!', isCompleted: false } ]; </code></pre> <p>What you are doing at this step is adding a Controller, to more specific an ObjectController to control each instance of a todo, then proxy the appropriate data to the Model and the appropriate data at this time is your 'isCompleted' value. But how do you end up with an Object? Lets take a look.</p> <p>The Todos' template controller is: (Check the spelling 'Todos')</p> <pre><code>Todos.TodosController = Ember.ArrayController.extend({ ... }); </code></pre> <p>What you now want is control over each individual(object) todo item within that Array <em>(You asked: 'what does this add')</em>. So in order to get back on Object, you implement this code in your handlebars template itemController="todo" which will then wrap each item in its own ObjectController instance named 'todo':</p> <pre><code>{{#each itemController="todo"}} </code></pre> <p>Now that you are getting an Object for each todo you implement the ObjectController: </p> <pre><code>Todos.TodoController = Ember.ObjectController.extend({ /* same code */ }); </code></pre> <p>Which will then check the 'isCompleted' property for each todo Object then get or set the property's value when the checkbox is toggled.</p> <pre><code>{{input type="checkbox" checked=isCompleted class="toggle"}} </code></pre> <p>This code uses a input helper in Ember that renders a 'checkbox' that passes the property 'checked' which is bound to the 'isCompleted property and sets a class 'toggle'</p> <p>Since it is a boolean value on the model it is going to return either true or false when toggled. The controller is watching for changes to the 'isCompleted' value by setting a computed property:</p> <pre><code>...}.property('model.isCompleted') </code></pre> <p>which will then alert the controller and update the template of the change. And also save the Model.</p> <pre><code>model.save(); </code></pre> <p>Not sure if that clears it up but i hope so. Happy Coding!!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload