Question

我正在尝试创建一个动态销售报告，允许用户通过一些即将推出的UI从表中删除客户行。总计行（代表所有销售产品的总数）需要更新，以便从显示屏中删除客户。

代码（在帖子底部）最初显示：

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

然后我使用控制台执行以下行：Report.cellsController.toggleCustomerDisplay('customer2');

我期待的是：

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 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>

Answer 1

我知道你要做什么，但这里有一些违规行为。即您的模型中不应包含硬编码控制器。这与MVC设计模式不符。另一个是在创建控制器时应该使用.set()。

我重写了你的代码并在this jsFiddle中提出了一个有效的解决方案。希望能为你解决问题。

Answer 2

它必须是自动更新的绑定，非？

Ember.js查看绑定不起作用？

2 个答案: