3

假设我在一个列表中有许多对象，我想从这些对象中创建<tr/>元素。<table/>我创建了一个Ember.View这样的：

App.TableRowItem = Ember.View.extend({
  classNames: ['list-row'],
  templateName: 'admin/things/tableRow',
  showActionRow: function() {},
  edit: function() {},
  save: function() {},
  delete: function() {}
});

现在，我想在 Handlebars 模板中为检索到的列表中的每个对象生成一个行项目，如下所示：

<table id="someTable">
  <thead>
    <tr><th>Head1</th><th>Head2</th><th>Head3</th></tr>
  </thead>
  <tbody>
    {{# each thing in controller.things}}
      {{log thing}}
      {{view App.TableRowItem contentBinding="thing" id="thing.id"}}
    {{/each}}
  </tbody>
</table>

我希望它做一个输出，id为每个 id 的元素创建一个标签this.id，但我收到以下错误消息：

Uncaught Error: assertion failed: Attempted to register a view with an id already in use: this.id

我究竟做错了什么？如果我没有id在{{view}}助手中设置，我会收到与上面相同的消息，但它会抱怨id already in use: null...

更新：

由于我无法解决问题，因此idBinding我尝试了以下解决方案App.TableRowItem：

App.TableRowItem = Ember.View.extend({
  tagName: 'tr',
  templateName: 'admin/things/tableRow',

  // this is new!
  init: function() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ ) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    this.set('elementId', text);
  }
});

现在我没有看到任何错误，但我看到不仅有<tr/>来自模板（admin/things/tableRow），而且还有一个<div/>元素似乎是我App.TableRowItem没有任何内容的表示！？

虽然调试this.$()给了我一个空白<tr id="1fFxV" class="ember-view"></tr>并且tableRow模板可以通过this.$().closest('tr').next()......

4

3 回答 3

2

If you want this to refer to the item in the loop, you need to change your {{#each}} format:

{{#each controller.things}}
  <!-- here the value of `this` is each item in the loop -->
{{/each}}

The way your {{each}} is constructed, this does not refer to the item but to the controller.

{{#each thing in controller.things}}
  <!-- to reference every item you need to use `thing` instead of `this` -->
{{/each}}

So this would work:

{{#each thing in controller.things}}
  {{view App.TableRowItem contentBinding="thing" idBinding="thing.id"}}
{{/each}}

or this:

{{#each controller.things}}
  {{view App.TableRowItem contentBinding="this" idBinding="id"}}
{{/each}}
于 2013-05-07T07:57:39.137 回答
2

我做过类似的。我的控制器看起来像这样：

App.ExampleController = Ember.ObjectController.extend({
  id: function() {
    var id = this.get('id');
    return id;
  }.property('id')
});

在我看来是这样的：

{{#each item in items }}
  <div class="exampleItem" {{bindAttr id="item.id"}}>
    Code comes here..
  </div>
{{/each}}

我希望它有帮助！

于 2013-05-07T08:20:58.937 回答
0

Have you checked the HTML. I think you'll find you're setting the elementId to the string "this.id", if you want to bind values you have to use the binding.

However, if you try and use elementIdBinding="this.id" you will get an error thrown, as an id can not be modified once the element is created as Ember uses IDs for internal booking.

Pretty much it's not worth trying to set custom ID's inside collections and try to solve your issue without requiring specific IDs

于 2013-05-07T07:57:45.563 回答