데이터를 비동기 적으로로드 할 때 내 간단한 Ember.js 핸들 막대 도우미가 작동하지 않는 이유는 무엇입니까?

Question

저는 돈 값을 단순히 포맷하는 간단한 Handlebars 도우미가 있습니다. 도우미는 정적 데이터로 테스트 할 때 속성을 사용하지만 데이터를 비동기 적으로로드 할 때는 작동하지 않습니다. 즉, {{totalBillable}}은 예상 금액을 출력하지만 {{money totalBillable}}은 0을 출력합니다. 그러나 데이터가 ajax 호출을 통해로드 될 때만. 내가 뭐 잘못하고있는거야?

나는 아래 가능한 한 많은 코드를 깎다하려고도 여기에 jsfiddle 만들었습니다 http://jsfiddle.net/Gjunkie/wsZXN/2/

이는 엠버 응용 프로그램입니다 :

여기

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

경우, 소유자 변경, 아약스 요청과 새로운 계약 데이터를 얻을. 데이터를 비동기 적으로 가져올 때 핸들 막대 도우미가 작동하지 않습니다.

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

을 설정하여 내가 대신이 버전을 사용하는 경우

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

후 핸들 도우미는 예상대로 작동

템플릿 :

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