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/>my を表現しているように見える要素もあることがわかりApp.TableRowItemます!?

デバッグ中this.$()に空<tr id="1fFxV" class="ember-view"></tr>になり、tableRowテンプレートに到達できthis.$().closest('tr').next()ます...

4

3 に答える 3

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 に答える
2

thisループ内のアイテムを参照したい場合は、{{#each}}フォーマットを変更する必要があります:

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

あなたの{{each}}構築方法はthis、アイテムではなくコントローラーを指します。

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

したがって、これは機能します：

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

またはこれ：

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

HTMLを確認しましたか？elementId を文字列「this.id」に設定していることに気付くと思います。値をバインドする場合は、バインディングを使用する必要があります。

ただし、elementIdBinding="this.id" を使用しようとすると、エラーがスローされます。これは、Ember が内部予約に ID を使用するため、要素が作成されると ID を変更できないためです。

コレクション内にカスタム ID を設定して、特定の ID を必要とせずに問題を解決しようとする価値はほとんどありません。

于 2013-05-07T07:57:45.563 に答える