3

Ember で表示しようとしているアイテムのリストがあります。これらの項目ごとに、各モデルの「message_type」フィールドに基づいて、表示に使用するビュー タイプを動的に選択できるようにしたいと考えています。

私は現在、このようなものを持っていますが、これは完全に悪く、スケーラブルではありません:

{{#each message in controller}}

  {{#if message.isImage}}
    {{view App.ImageMessageView}}
  {{/if}}

  .... 

  {{#if message.isVideo}}
    {{view App.VideoMessageView}}
  {{/if}}

{{/each}}

Ember でモデルのフィールドに基づいてビューを動的に選択するにはどうすればよいですか?

4

2 に答える 2

7

これを行う 2 つの方法を示した同様の質問があります: Collection of objects of multiple models as the iterable content in a template in Ember.js

プロパティまたはそのタイプに基づいてアイテムをレンダリングする

私はこれを行う2つの方法を知っています:

  1. 各オブジェクトにブール値のプロパティを追加し、ハンドルバーを使用し{{#if}}てそのプロパティをチェックし、正しいビューをレンダリングします
  2. 計算されたプロパティを拡張Ember.Viewして使用し、レンダリングされるオブジェクトのタイプに基づいてレンダリングされるテンプレートを切り替えます ( Ember.js を使用してモデル タイプ/オブジェクト値によってビュー テンプレートを選択するに基づく)

方法 1

JS:

App.Post = Ember.Object.extend({
  isPost: true
});

App.Bookmark = Ember.Object.extend({
  isBookmark: true
});

App.Photo = Ember.Object.extend({
  isPhoto: true
});

テンプレート：

<ul>
  {{#each item in controller.stream}}
      {{#if item.isPost}}
        <li>post: {{item.name}} {{item.publishtime}}</li>
      {{/if}}
      {{#if item.isBookmark}}
        <li>bookmark: {{item.name}} {{item.publishtime}}</li>
      {{/if}}
      {{#if item.isPhoto}}
        <li>photo: {{item.name}} {{item.publishtime}}</li>
      {{/if}}
  {{/each}}
   </ul>

方法 2

JS:

App.StreamItemView = Ember.View.extend({
  tagName: "li",
  templateName: function() {
    var content = this.get('content');
    if (content instanceof App.Post) {
      return "StreamItemPost";
    } else if (content instanceof App.Bookmark) {
      return "StreamItemBookmark";
    } else if (content instanceof App.Photo) {
      return "StreamItemPhoto";
    }
  }.property(),

  _templateChanged: function() {
        this.rerender();
    }.observes('templateName')
})

テンプレート：

<ul>
{{#each item in controller.streamSorted}}
    {{view App.StreamItemView contentBinding=item}}
{{/each}}
 </ul>

JSBinの例 - ソートされていないリストはメソッド 1 でレンダリングされ、ソートされたリストはメソッド 2 でレンダリングされます

于 2013-04-23T12:50:58.480 に答える
0

もう少し検討が必要かもしれませんが、私がすぐに思いついたのは次のとおりです。

var get = Ember.get,
    isGlobalPath = Ember.isGlobalPath,
    normalizePath = Ember.Handlebars.normalizePath;

var getProp = function (context, property, options) {
    if (isGlobalPath(property)) {
        return get(property);
    } else {
        var path = normalizePath(context, property, options.data);
        return get(path.root, path.path);
    }
};

Ember.Handlebars.registerHelper('detect', function (definition, instance, options) {
    Ember.assert("You must pass exactly two argument to the detect helper", arguments.length === 3);
    Ember.assert("You must pass a block to the detect helper", options.fn && options.fn !== Handlebars.VM.noop);

    var path = '_detect_' + definition.replace('.', '_').toLowerCase();
    context = (options.contexts && options.contexts[0]) || this;
    definition = getProp(context, definition, options);
    instance = getProp(context, instance, options);
    context.set(path, definition.detectInstance(instance));

    return Ember.Handlebars.helpers.boundIf.call(options.contexts[0], path, options);
});

次に、次のようなヘルパーを使用できます。

{{#detect App.Definition instance}}
    DETECTED
{{else}}
    NOT DETECTED
{{/detect}}
于 2013-04-23T07:18:00.707 に答える