ember.jsがJSON呼び出しで動作していないテーブルのテンプレート

Question

テーブルに税をリストするインデックスページがあります。私は にこれを実装しようとしていますember.js 連絡先の例のアプリケーションのコードの次にこれを実装しています。ここで

が主旨である：私は taxes.jsの19行をコメントアウトすることにより、JSONからコンテンツをロードしていない場合はhttps://gist.github.com/1494281

、テーブルが正しくレンダリングされます。しかし、 というコンテンツを私がtaxes.jsonから引っ張った場合、テーブルはtrと tdの要素なしでレンダリングされます。

スクリプト：

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

App.taxesController = Ember.ArrayController.create({ 
    content: [ 
    {name:"tax1",rate:"10",number_id:"TaxIDNum"}, 
    {name:"tax2",rate:"9",number_id:null} 
    ], 
    newTax: function() { 
    this.pushObject(App.Tax.create({})); 
    }, 
    loadTaxes: function() { 
    console.log('loadTaxes'); 
    var self = this; 
    $.getJSON('/taxes.json', function(json) { 
     console.log('got response', taxes); 
     var taxes = json.map(function(item) { 
         return self.createTaxFromJSON(item); 
         }); 
     self.set('content', taxes); 
     }); 
    }, 
    createTaxFromJSON: function(json) { 
    console.log("createTaxFromJSON", json.tax); 
    return App.Tax.create(json.tax); 
    } 
}); 

App.taxesController.loadTaxes(); 

App.selectedTaxController = Ember.Object.create({ 
    content: null 
}); 

App.TaxListView = Ember.View.extend({ 
    classNameBindings: ['isSelected'], 
    click: function() { 
     var content = this.get('content'); 
     console.log('click', content); 
     App.selectedTaxController.set('content', content); 
    }, 
    isSelected: function() { 
     var selectedItem = App.selectedTaxController.get('content'); 
     var content = this.get('content'); 
     if (content == selectedItem) { 
     return true; 
     } 
     return false; 
    }.property('App.selectedTaxController.content') 
}); 

App.TaxView = Ember.View.extend({ 
    contentBinding: 'App.selectedContactController.content' 
}); 

HTML：

<script type="text/x-handlebars"> 
    <table> 
     {{#each App.taxesController.content}} 
     {{#view App.TaxListView contentBinding="this" tagName="tr"}} 
      {{#with content}} 
      <td>{{name}}</td> 
      <td>{{rate}}</td> 
      <td>{{number_id}}</td> 
      <td> 
     <a href="#" class="nice tiny radius blue button">Edit</a> 
     <a href="#" class="nice tiny radius red button">Delete</a> 
      </td> 
     {{/with}} 
    {{/view}} 
     {{/each}} 
    </table> 
</script> 

JSON：あなたは結果のHTMLを見てみると

[{"tax":{"account_id":1,"created_at":"2011-12-16T22:45:43Z","id":1,"name":"CA Sales Tax","number_id":"","rate":10.0,"updated_at":"2011-12-16T22:45:43Z"}},{"tax":{"account_id":1,"created_at":"2011-12-17T01:03:01Z","id":2,"name":"Second Tax","number_id":"EIN29387","rate":0.3,"updated_at":"2011-12-17T01:03:01Z"}}] 

Answer 1

、あなたはその燃えさしがあなたのテーブル内のタグを追加気づくでしょう。これらは、、、タグ内にのみ存在でなければならない、タグバインディングは、HTMLの仕様に応じて

を動作させるためのマーカーである、他のすべてはそれを動作させるために、未定義の動作

である、あなたは削除する必要があります{{#view}}と少なくとも何か役に立つものをレンダリングする必要があります。