S.O.: Binding controllers and views
http://stackoverflow.com/questions/9363921/ember-js-view-binding-not-working/9368354#9368354
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name='sales-report'>
Cells
<hr />
{{#each Report.cellsController}}
<div>{{productID}}:{{customerID}} {{quantity}}</div>
{{/each}}
<hr />
{{view Report.TotalProductsView}}
</script>
<script type="text/x-handlebars" data-template-name='total-products-report'>
Totals
<hr />
{{#each Report.totalsController}}
<div>{{keyValue}}- {{quantity}}
{{/each}}
</script>
JavaScript
Report = Em.Application.create();
/**************************
* Models
**************************/
Report.CustomerProductReportCellModel = Em.Object.extend({
productID: '',
customerID: '',
originalQuantity: 0,
display: true,
quantity: function() {
var display = this.get('display'),
originalQuantity = this.get('originalQuantity');
return display ? originalQuantity : 0;
}.property('display', 'originalQuantity')
});
Report.CustomerProductReportTotalCellModel = Em.Object.extend({
primaryID: 'productID',
keyValue: '',
quantity: 0
});
/**************************
* Views
**************************/
Report.MainView = Em.View.extend({
templateName: 'sales-report'
});
Report.TotalProductsView = Em.View.extend({
templateName: 'total-products-report'
});
/**************************
* Controllers
**************************/
Report.set('cellsController', Em.ArrayProxy.create({
content: Ember.A(),
createCellFromObjectLiteral: function(objLiteral) {
var ourCell = Report.CustomerProductReportCellModel.create(objLiteral);
this.pushObject(ourCell);
},
toggleCustomerDisplay: function(customerID){
var content = this.get('content');
// halt updates to bindings until all display values are changed. Good practice :)
Ember.beginPropertyChanges();
content.forEach(function(cell){
if(cell.get('customerID') == customerID){
cell.set('display', !cell.get('display'));
}
});
Ember.endPropertyChanges();
// Tell the totals controller to recalculate the totals
Report.get('totalsController').calculateTotals();
}
}));
Report.set('totalsController', Em.ArrayProxy.create({
content: Ember.A(),
createTotalFromObjectLiteral: function(objLiteral) {
var ourTotal = Report.CustomerProductReportTotalCellModel.create(objLiteral);
...