Warum funktioniert mein einfacher Ember.js Handlebars-Helper nicht, wenn ich Daten asynchron lade?

Question

Ich habe einen einfachen Handlebars-Helfer, der einfach einen Geldwert formatiert. Der Helfer funktioniert Eigenschaft, wenn ich mit statischen Daten testen, aber nicht, wenn ich Daten asynchron laden. Mit anderen Worten: {{totalBillable}} gibt den erwarteten Betrag aus, aber {{money totalBillable}} gibt Null aus. Aber nur, wenn die Daten über einen Ajax-Aufruf geladen werden. Was zum Teufel mache ich falsch?

Ich habe versucht, den Code so weit wie möglich zu verkleinern, und auch ein jsfiddle hier erstellt: http://jsfiddle.net/Gjunkie/wsZXN/2/

Dies ist eine Ember-Anwendung:

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

Hier ist der Helfer für den Lenker:

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

Modell:

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

App Controller:

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

Contracts Controller (verwaltet eine Reihe von Verträgen):

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"),

Wenn sich der Eigentümer ändert, werden die neuen Vertragsdaten mit einer Ajax-Anfrage abgerufen. Wenn Daten asynchron abgerufen werden, funktioniert der Handlebars-Helper nicht.

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

Wenn ich stattdessen diese Version verwende, dann funktioniert die Handlebars-Hilfe wie erwartet:

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

Ansicht:

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

Beginnen Sie mit der Festlegung eines Eigentümers

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

Vorlage:

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