為什么我的簡單Ember.js Handlebars輔助工具在異步加載數據時不起作用？

Question

我有一個簡單的Handlebars助手，只需格式化貨幣價值。 當我使用靜態數據進行測試時，幫助程序工作屬性，但是當我異步加載數據時則不行。 換句話說，{{totalBillable}}將輸出預期金額，但{{money totalBillable}}將輸出零。 但只有當數據通過ajax調用加載時。 我到底做錯了什么？

我試圖盡可能地減少代碼，並在這里創建了一個jsfiddle： http ： //jsfiddle.net/Gjunkie/wsZXN/2/

這是一個Ember應用程序：

App = Ember.Application.create({});

這是車把助手：

Handlebars.registerHelper("money", function(path) {
  var value = Ember.getPath(this, path);
  return parseFloat(value).toFixed(2);
});

模型：

App.ContractModel = Ember.Object.extend({});

應用控制器：

App.appController = Ember.Object.create({
    proprietor: null,
});

合同控制器（管理一系列合同）：

App.contractsController = Ember.ArrayController.create({
    content: [],

    totalBillable: function() {
        var arr = this.get("content");
        return arr.reduce(function(v, el){
            return v + el.get("hourlyRate");
        }, 0);
    }.property("content"),

當所有者更改時，使用ajax請求獲取新的合同數據。 異步獲取數據時，把手助手不起作用。

    proprietorChanged: function() {
        var prop = App.appController.get("proprietor");
        if (prop) {
            $.ajax({
                type: "POST",
                url: '/echo/json/',
                data: {
                    json: "[{\"hourlyRate\":45.0000}]",
                    delay: 1
                },
                success: function(data) {
                    data = data.map(function(item) {
                        return App.ContractModel.create(item);
                    });
                    App.contractsController.set("content", data);
                }
            });
        }
        else {
            this.set("content", []);
        }
    }.observes("App.appController.proprietor")
});

如果我使用此版本，那么Handlebars助手按預期工作：

    proprietorChanged: function() {
        var prop = App.appController.get("proprietor");
        if (prop) {
            var data = [{
                "hourlyRate": 45.0000}];
            data = data.map(function(item) {
                return App.ContractModel.create(item);
            });
            App.contractsController.set("content", data);
        }
        else {
            this.set("content", []);
        }
    }.observes("App.appController.proprietor")

視圖：

App.OverviewTabView = Ember.TabPaneView.extend({
    totalBillableBinding: "App.contractsController.totalBillable"
});

通過設置一個東主來解決問題

App.appController.set("proprietor", {
    ID: 1,
    name: "Acme"
});

模板：

<script type="text/x-handlebars">
    {{#view App.OverviewView viewName="overview"}}
        <div class="summary">
           Total Billable: {{totalBillable}}<br/>
           Total Billable: {{money totalBillable}}<br/>
        </div>
    {{/view}}
</script>

Answer 1

使用幫助器時，把手不會在助手調用周圍發出變形標簽。 這樣，模板的這一部分不會重新渲染，因為沒有綁定

要手動綁定要重新呈現的模板的一部分，您可以使用bind幫助器：

<script type="text/x-handlebars">
  {{#view App.OverviewView viewName="overview"}}
    <div class="summary">
       Total Billable: {{totalBillable}}<br/>
       Total Billable: {{#bind totalBillable}}{{money this}}{{/bind}}<br/>
    </div>
  {{/view}}
</script>