0
사용자가 곧 만들 UI를 통해 표에서 고객 행을 제거 할 수있는 동적 영업 보고서를 작성하려고합니다. 판매 된 모든 제품의 합계를 나타내는 합계 행은 고객을 디스플레이에서 제거하기 위해 업데이트해야합니다. Report.cellsController.toggleCustomerDisplay('customer2');Ember.js보기 바인딩이 작동하지 않습니까?
내가 기대하는 것은 :
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
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
가 그럼 난 라인을 실행하기 위해 콘솔을 사용
(게시물의 하단에있는) 코드는 처음에이 보여줍니다 내가 얻는 것은 :
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
Report.totalsController.spillguts() 디버그 함수를 실행할 때 예상 값이 있다고 들었는데 내 뷰가 업데이트되지 않는 이유는 무엇입니까?
코드 :
<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>
이것은 내가 기대했던 것처럼 작동하며, 나는 완전히 잊어버린 많은 관례/아이디어를 보았습니다. 고마워, ++! – Deltran