Deltran
Reputation: 135
Ember.js View Binding Not Working?
I'm trying to make a dynamic sales report that allows users to remove customer rows from a table via some soon-to-be-made UI. The totals row, representing the total of all products sold, needs to be updated for the removal of a customer from the display.
The code (at bottom of post) initially shows this:
product1:customer1 5
product2:customer1 6
product3:customer1 7
product1:customer2 5
product2:customer2 6
product3:customer2 7
product1:customer3 5
product2:customer3 6
product3:customer3 7
product1- 15
product2- 18
product3- 21
Then I use the console to execute the line: Report.cellsController.toggleCustomerDisplay('customer2');
What I EXPECT is:
product1:customer1 5
product2:customer1 6
product3:customer1 7
product1:customer2 0
product2:customer2 0
product3:customer2 0
product1:customer3 5
product2:customer3 6
product3:customer3 7
product1- 10
product2- 12
product3- 14
What I GET is:
product1:customer1 5
product2:customer1 6
product3:customer1 7
product1:customer2 0
product2:customer2 0
product3:customer2 0
product1:customer3 5
product2:customer3 6
product3:customer3 7
product1- 15
product2- 18
product3- 21
When I run the debug function Report.totalsController.spillguts() I am told that the expected values are there - so why isn't my view being updated?
Code:
<html>
<head>
<link rel="stylesheet" href="assets/bpm_styles.css" type="text/css" media="screen" charset="utf-8" />
<title>my_app</title>
<script type="text/x-handlebars" data-template-name='sales-report'>
{{#each Report.cellsController}}
<div>{{productID}}:{{customerID}} {{quantity}}</div>
{{/each}}
{{view Report.TotalProductsView}}
</script>
<script type="text/x-handlebars" data-template-name='total-products-report'>
{{#each Report.totalsController}}
<div>{{keyValue}}- {{quantity}}
{{/each}}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
<script type="text/javascript" src="assets/bpm_libs.js"></script>
<script type="text/javascript">
spade.require('my_app');
spade.require('ember');
var 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: function(){
var content = Report.cellsController.get('content');
var currentDisplayQuantity = 0;
var keyValue = this.get('keyValue');
var primaryID = this.get('primaryID');
content.forEach(function(cell){
if(cell[primaryID] == keyValue){
var qty = cell.get('quantity');
currentDisplayQuantity += qty;
}
});
return currentDisplayQuantity;
}.property('Report.cellsController.content', 'keyValue', 'primaryID')
});
/**************************
* Controller
**************************/
Report.cellsController = Em.ArrayController.create({
content: [],
createCellFromObjectLiteral: function(objLiteral) {
var ourCell = Report.CustomerProductReportCellModel.create(objLiteral);
this.pushObject(ourCell);
},
spillguts: function() { //for debugging purposes
var content = this.get('content');
content.forEach(function(cell){
//$('#debug').innerHTML +=
alert(cell.productID + ' ' + cell.customerID + ' ' + cell.originalQuantity + ':' + cell.get('quantity') + '<br />');
});
},
toggleCustomerDisplay: function(customerID){
var content = this.get('content');
content.forEach(function(cell){
if(cell.get('customerID') == customerID){
var toggleToValue = !cell.get('display');
cell.set('display',toggleToValue);
}
});
}
});
Report.totalsController = Em.ArrayController.create({
content: [],
createTotalFromObjectLiteral: function(objLiteral) {
var ourTotal = Report.CustomerProductReportTotalCellModel.create(objLiteral);
this.pushObject(ourTotal);
},
spillguts: function() { //for debugging purposes
var content = this.get('content');
content.forEach(function(cell){
alert(cell.keyValue + ' ' + cell.get('quantity'));
});
}
});
//customer 1
Report.cellsController.createCellFromObjectLiteral({productID: 'product1', customerID: 'customer1', originalQuantity: 5, display: true});
Report.cellsController.createCellFromObjectLiteral({productID: 'product2', customerID: 'customer1', originalQuantity: 6, display: true});
Report.cellsController.createCellFromObjectLiteral({productID: 'product3', customerID: 'customer1', originalQuantity: 7, display: true});
//customer 2
Report.cellsController.createCellFromObjectLiteral({productID: 'product1', customerID: 'customer2', originalQuantity: 5, display: true});
Report.cellsController.createCellFromObjectLiteral({productID: 'product2', customerID: 'customer2', originalQuantity: 6, display: true});
Report.cellsController.createCellFromObjectLiteral({productID: 'product3', customerID: 'customer2', originalQuantity: 7, display: true});
//customer 3
Report.cellsController.createCellFromObjectLiteral({productID: 'product1', customerID: 'customer3', originalQuantity: 5, display: true});
Report.cellsController.createCellFromObjectLiteral({productID: 'product2', customerID: 'customer3', originalQuantity: 6, display: true});
Report.cellsController.createCellFromObjectLiteral({productID: 'product3', customerID: 'customer3', originalQuantity: 7, display: true});
//Product Totals
Report.totalsController.createTotalFromObjectLiteral({primaryID: 'productID', keyValue: 'product1'});
Report.totalsController.createTotalFromObjectLiteral({primaryID: 'productID', keyValue: 'product2'});
Report.totalsController.createTotalFromObjectLiteral({primaryID: 'productID', keyValue: 'product3'});
//alert(Report.totalsController.get('content')[1].get('quantity'));
Report.MainView = Em.View.extend({
templateName: 'sales-report'
});
Report.TotalProductsView = Em.View.extend({
templateName: 'total-products-report'
});
//Report.mainView.append();
var mainview = Report.MainView.create();
mainview.append();
//var totalproductsview = Report.TotalProductsView.create();
//totalproductsview.append();
</script>
</html>
Upvotes: 0
Views: 3150
Answers (2)
Roy Daniels
Reputation: 6309
I see what you're trying to do, but there are some violations in here. Namely your models should not have hard coded controllers in them. That goes against MVC design patterns. Another is that you should be using .set() when creating your controllers.
I rewrote your code and put a working solution in this jsFiddle. Hope that clears things up for you.
Upvotes: 3
