4

私が達成したいこと:ビューでコントローラーを作成し、このビューに「ギャラリー」オブジェクトのリストがあります。各アイテムには独自のビューとコントローラーがあります。

すべてのファイルはこちら: https://gist.github.com/7e72bb2f532c171b1bf3

一部のテキストを表示/非表示にすると、意図したとおりに機能しますが、個人的には、これはあまり良い解決策ではないと思います。

{{collection}} ヘルパーを使用する必要があると思いますが、ember.js ページにはドキュメントがありません (コードにはいくつかありますが、このヘルパーが少し古くなっているかどうかはわかりません。ソースには、「// TODO: このモジュールのすべてを必要としないでください」と書かれています)。

itemController プロパティを使用しようとしましたが、まだ 1 つのファイルにテンプレートがあります。

また、{{#each}} で {{render}} ヘルパーを使用しようとしましたが、エラーが発生しました。

それで、私が望むものを達成するためのより良い/よりクリーンな方法はありますか?

編集

Michael Grassotti が提供する説明のようにすべてを作成した後、奇妙な動作が発生しました。テンプレートへのプロパティは itemController から取得されますが、{{action}} ヘルパーは親コントローラーにバインドされます。私が扱っているものを示すためにスクリーンショットを作成しました。

ここに画像の説明を入力

基本的に、itemView の「this」は右のコントローラー (itemController) を指しますが、ターゲット プロパティには親コントローラーがあります。

作成{{action "deleteGallery" this target="this"}}してクリックすると、スクリーンショットのようにエラーが発生します。現時点では、アイデアが不足しています...

EDIT2：

わかりました、考えすぎです。itemController は計算されたプロパティを定義するためのものであり、{{action}} ハンドラーを記述するためのものではありません。

EDIT3: itemController とイベント ターゲットに関する問題は修正されると思います。 https://github.com/emberjs/ember.js/issues/1846

4

2 に答える 2

9

{{collection}} ヘルパーを使用する必要があると思いますが、ember.js ページにはドキュメントがありません (コードにはいくつかありますが、このヘルパーが少し古くなっているかどうかはわかりません。ソースには、「// TODO: このモジュールのすべてを必要としないでください」と書かれています)。

同意した。コレクション ヘルパーは引き続き機能しますが、今後 public-api の一部になるかどうかはわかりません。{{#each}}可能であれば、ヘルパーに固執するのが最善です。

itemController プロパティを使用しようとしましたが、まだ 1 つのファイルにテンプレートがあります。

プロパティはitemController良いスタートです。これは、各アイテムに独自のコントローラーを与える最良の方法です。

また、{{#each}} で {{render}} ヘルパーを使用しようとしましたが、エラーが発生しました。

はい、{{render}}ヘルパーは{{each}}ブロック内で使用するように設計されていません。

それで、私が望むものを達成するためのより良い/よりクリーンな方法はありますか?

うん。まず、itemControllerプロパティを使用します。次に、それぞれに独自のビューを与えるには、 にitemViewClassオプションを提供します{{each helper}}。例えば：

# in galleries_index.hbs
{{each controller itemViewClass="App.GalleriesIndexItemView"}

詳細については、各ヘルパーの API ドキュメントの「ブロックレス使用」セクションを参照してください。

App.GalleriesIndexItemView次に、テンプレートを指定するようにカスタマイズします。

App.GalleriesIndexItemView = Ember.View.extend({
    templateName: "galleries_index_item",
    tagName: 'li',
    classNames: ['span4'],
    hover: false,
    mouseEnter: function() {
        this.set('hover', true);
    },
    mouseLeave: function() {
        this.set('hover', false);
    }
});

html を each ヘルパーからテンプレートに移動します。

# galleries_index_item.hbs
  <div class="thumbnail">
      <a href="#">
          <img src="images/300x200.gif" alt="">
      </a>
      <div class="caption">
          <h4>{{name}}</h4>              
          {{#if view.hover}}
              <button {{action editGallery this }} class="btn btn-mini" type="button">Edit</button>
              <button {{action deleteGallery this}} class="btn btn-mini" type="button">Delete</button>
          {{/if}}
      </div>
  </div>

現在、すべてのアイテムに独自のビューとコントローラーがあります。

于 2013-01-30T21:52:29.350 に答える
3

を使用することをお勧めしますEmber.CollectionView。

テンプレートgalleriesIndexは次のようになります。

<div class="container">
    <div class="row">
        <div class="span12">
            {{view App.GalleriesListView contentBinding="this"}}
        </div>
    </div>
</div>

景色：

App.GalleriesListView = Ember.CollectionView.extend({
    classNameBindings: [':thumbnail', ':thumbnails-list'],
    itemViewClass: Ember.View.extend({
        templateName: "galleriesListItem",
        hover: false,
        mouseEnter: function() { this.set('hover', true); },
        mouseLeave: function() { this.set('hover', false; }
    })
});

galleriesListItemテンプレート:

<li class="span4">
    <div class="thumbnail">
        <a href="#">
            <img src="images/300x200.gif" alt="">
        </a>
        <div class="caption">
            <h4>{{view.content.name}}</h4>                        
            {{#if view.hover}}
                <button {{action editGallery view.content }} class="btn btn-mini" type="button">Edit</button>
                <button {{action deleteGallery view.content}} class="btn btn-mini" type="button">Delete</button>
            {{/if}}
        </div>
    </div>
</li>

コードにエラーがないかどうかはわかりません。コピーして貼り付けて、どのように見えるかを書きます。

ご覧のとおりTODO、これは が必要なファイルだけでなく、Ember.CollectionView実際にはすべてのember-handlebarsモジュールを必要とするためです。気にする必要はありません。

于 2013-01-30T21:35:53.000 に答える