4

タイトルはばかげているように聞こえるかもしれません。次のコードを検討してください

私のハンドルバーファイル

<table id="main-table">
  <tr>
    <td>
      <h1>Some Text</h1>
    </td>
    {{#collection myCollectionView}}
    <td>
      <table>
        <tr><td>{{view.someProperty}}</td></tr>
      </table>
    </td>    
    {{/collection}}
  </tr>
</table>

マイビューファイル

myCollectionView = Ember.CollectionView.extend({
  contentBinding: "myController.someArray",
  //someArray has say 4 elements
  itemViewClass: Ember.View.extend()
})

itemViewClass4つのテーブルを＃main-table内にレンダリングしたいのですが、デフォルトのdivタグの内側を囲んでいるため、代わりに#main-tableの外側にレンダリングします。プロパティを変更することしかtagNameできませんが、nilに設定することはできません。この問題のハックはありますか？

JSFiddle

最初の回答への回答 {{each}}の問題は、次のようにEditableFieldを使用していることです:(
明確に聞こえるように、編集可能なフィールドは、ダブルクリックしてdivタグに戻るとdivをテキストフィールドに変更するフィールドですフォーカスアウト、残り火を使用して構築されたシンプルなウィジェット）

更新されたハンドルバーファイル

<table id="main-table">
  <tr>
    <td>
      <h1>Some Text</h1>
    </td>
    {{#collection myCollectionView}}
    <td>
      <table>
        <tr><td>{{view.myEditableField valueBinding="view.content"}}</td></tr>
      </table>
    </td>    
    {{/collection}}
  </tr>
</table>

更新されたビューファイル

myCollectionView = Ember.CollectionView.extend({
  contentBinding: "myController.someArray",
  //someArray has say 4 elements
  itemViewClass: Ember.View.extend({
    alertFunc: function(){
      alert("content did change");
    }.observes('content')
  })
})

データベース内のレコードを更新できるように、editableFieldの1つの値が変更されるたびにオブザーバーを起動する必要があります。{{each}}ヘルパーを使用してこのことを達成できますか？また、arrayContentDidChangeは、配列の長さが変更された場合にのみ起動します

4

2 に答える 2

8

エンバービューでこれを行うことが可能です

App.MyView = Ember.View.extend({
  tagName: ''
});
于 2013-11-06T15:50:41.083 に答える
4

ちなみに、DOMに「実際の存在」がなければEmber.Viewは存在できませんが{{each}}、コンテナーとして機能するビュー（ここでは）を追加したくない場合は、ヘルパーを使用できますEmber.CollectionView。

に設定tagNameするとnull機能しません。Ember.Viewのソースコードを参照してください。

レンプレート：

<script type="text/x-handlebars">
    <table id="main-table">
  <tr>
    <td>
      <h1>Some Text</h1>
    </td>
    {{#each App.content}}
      <td>
        <table><tr><td>{{name}}</td></tr></table>
      </td>
    {{/each}}
  </tr>
</table>
</script>​

コード：

App = Ember.Application.create();
App.content = [{name: "foo"}, {name: "bar"}, {name: "baz"}];

このJSFiddleを参照してください。

于 2012-08-30T12:03:36.983 に答える