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在表格中添加了标签。这些是绑定工作的标记

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

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

使用不使用JSON调用的ember.js模板化表

1 个答案: