Array controller with item controller
The latest build of Ember.
by Kerrick
HTML
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="formFieldGroup">
FormFieldGroup: {{name}}<br />
{{render 'formFields' model.formFields}}
</script>
<script type="text/x-handlebars" data-template-name="formFields">
<p>FormFields: {{content.length}}</p>
<p>Editing count: {{editingCount}}</p>
{{#each formFields in controller}}
<p>- <a {{action 'toggleEditing'}} {{bind-attr class='isEditing:isEditing'}}>{{labelText}} ({{isEditing}})</a> {{controllerProperty}}</p>
{{/each}}
</script>
CSS
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; }
li { padding: 5px 0; }
.isEditing { color: orange; }
JavaScript
App = Ember.Application.create({});
// Routes
App.Router.map(function() {
this.route("formFieldGroup");
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('formFieldGroup');
}
});
App.FormFieldGroupRoute = Ember.Route.extend({
model: function(params) {
return this.get("store").find("formFieldGroup", 32);
},
setupController: function(controller, model){
controller.set('content', model);
}
});
// Controllers
App.IndexController = Ember.ObjectController.extend();
App.FormFieldGroupController = Ember.ObjectController.extend({
needs: ['formField', 'formFields'],
actions: {
// Move this to the FormController when done
closeEditors: function() {
this.get('controllers.formFields').send('closeEditors');
}
}
});
App.FormFieldsController = Ember.ArrayController.extend({
needs: 'formField',
itemController: 'formField',
editingCount: function() {
return this.filterProperty('isEditing', true).get('length');
}.property('@each.isEditing'),
actions: {
closeEditors: function() {
this.forEach(function(item, index, enumerable) {
alert("test"); // This isn't getting reached
});
}
}
});
App.FormFieldController = Ember.ObjectController.extend({
needs: ['formFieldGroup'], // Needed to access FormFieldsController
isEditing: false,
actions: {
toggleEditing: function() {
this.get('controllers.formFieldGroup').send('closeEditors');
this.toggleProperty('isEditing');
}
}
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// Models
App.Form = DS.Model.extend({
name: DS.attr('string'),
formFieldGroups: DS.hasMany('formFieldGroup',{async:true})
});
App.FormFieldGroup = DS.Model.extend({
name: DS.attr('string'),
form: DS.belongsTo('form',{async:true}),
formFields:...