Geek Answers Handbook

How to create a multimedia list in Ember.js

I am trying to figure out how to create a small application consisting of a list in which you can select several items and switch to select all / none and see the number of selected rows.

I believe that the “selected” state should not be part of the model’s objects, but I cannot figure out how to do this.

This is my current setup (which is not working yet)

Managed Code http://jsfiddle.net/jacobk/rU35G/1/

var App = Ember.Application.create(); App.ApplicationRoute = Ember.Route.extend({ model: function() { return Ember.A(["Foo", "Bar", "Baz"]); } }); App.ApplicationController = Ember.ArrayController.extend({ allSelected: false, selectedCount: function() { return 0; }.property() }); App.RowController = Ember.ObjectController.extend({ isSelected: false }); 
 <script type="text/x-handlebars" data-template-name="application"> <h3>{{ selectedCount }} rows selected.</h3> <label> {{view Ember.Checkbox checkedBinding="allSelected"}} Toggle select all </label> <hr/> <ul> {{#each controller itemController="row"}} <li {{bindAttr class="isSelected"}}> {{view Ember.Checkbox checkedBinding="isSelected"}} {{this.content}} </li> {{/each}} </ul> </script>
  • If individual "line items" are controlled using a custom view for each line or a custom controller, as in the script above
  • How to distribute "select all" from an ArrayController to all individual controllers (or views, if that works best).

I am trying to figure out when to use bindings, observers, properties, "needs", etc. and when it is advisable to use controllers against representations, etc. I still do not understand the general flow of information / data in ember applications.

eg. should the ArrayController from my example above iterate over the "contained" views / controllers and change the "selected" state when the "select all" checkbox switches OR if all "subcontrollers" observe / "have bindings to the" ArrayController "and change themselves when they change, and if so, how do I spread the data in the opposite direction. How would the ArrayController get the "all selected now" strings?

I would like to see a "canonical solution" for this.

+4
source share
2 answers

There is no need for a row controller. @each, a computed property, and a test binding can be used to solve this problem, as shown below. isSelected must be defined in the contents of the arraycontroller:

  App.ApplicationController = Ember.ArrayController.extend({ allSelected: function(key, value) { if ( value !== undefined ) { // when check box is ticked, this gets executed this.setEach( 'isSelected', value ); return value; } else { //as a computed property return !!this.get( 'length' ) && this.everyProperty( 'isSelected', true ); } }.property('@each.isSelected') selectedCount: function() { return 0; }.property() });
+1
source

I agree to save the selected state outside the model. You must define itemController in Ember.ArrayController.

here is a working example. http://jsbin.com/sunat/3/edit

 App.RowController = Ember.ObjectController.extend({ isSelected: false }); App.IndexController = Ember.ArrayController.extend({ itemController: 'row', selectAll: function(key, value) { if (arguments.length == 2) { this.setEach('isSelected', value); return value; } else { return this.isEvery('isSelected', true); } }.property('@each.isSelected') }); #template <script type="text/x-handlebars" id="index" > <label> {{input type="checkbox" checked=selectAll}} Toggle select all </label> <hr/> <ul> {{#each}} <li> {{input type="checkbox" checked=isSelected}} {{name}} </li> {{/each}} </ul> </script>
0
source

More articles:


All Articles