Javascript 为什么'；异步加载数据时，我的simple Ember.js Handlebars助手是否工作？

我有一个简单的车把助手，它可以简单地格式化货币价值。当我使用静态数据进行测试时，helper属性起作用，但当我异步加载数据时，helper属性不起作用。换句话说，{{totalBillable}}将输出预期金额，但{money totalBillable}将输出零。但仅当数据通过ajax调用加载时。我到底做错了什么

我试图尽可能地精简代码，并在这里创建了一个JSFIDLE：

这是一个余烬应用程序：

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,
});

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

当所有者发生变化时，通过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.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>

{{{#view App.overview viewName=“overview”}
可计费总额：{{totalBillable}}

可计费总额：{{money totalBillable}}

{{/view}

使用助手时，手柄不会在助手呼叫周围发出变形标记。这样，模板的这一部分不会重新呈现，因为没有绑定

要手动绑定要重新渲染的模板的一部分，可以使用

bind

helper：

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

{{{#view App.overview viewName=“overview”}
可计费总额：{{totalBillable}}

可计费总额：{{{{绑定可计费总额}}{{money this}}{{/bind}}

{{/view}

当您执行setTimeout（）调用而不是ajax时，它是否也会中断？这回答了我的问题。但是，我不能让它工作：{{{bind totalBillable}{{money this}{{/bind}}}。这样使用助手时，上下文似乎不同。{{{#bind totalBillable}{{money this}{{{/bind}}}：在助手中，this==totalBillable的值，而不是view对象。令人困惑对于我的项目，我最终处理了视图中的格式设置。另请参见您也可以使用

registerBoundHelper

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

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