javascript - 使用 ember.js 模板化表格不支持 JSON 调用

Question

我有一个索引页，在表格中列出了税收。我试图在 ember.js 中的一些代码之后实现这个联系人示例应用程序。

这里是要点:https://gist.github.com/1494281

当我不从 JSON 加载内容时，通过注释掉第 19 行taxes.js，表格正确呈现。但是，如果我使用内容我从 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:

[{"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 时，您会注意到 ember 在您的表格中添加了标签。这些是绑定(bind)工作的标记

根据 HTML 规范，标签内必须只有 , , , 标签，其他一切都是未定义的行为

要使其正常工作，您必须删除 {{#view}} 并且它至少应该呈现一些有用的东西。