根据模型选择视图类型 [英] Selecting view type based on model

问题描述

我有一个我试图用Ember显示的项目列表。对于这些项目中的每一个，我希望能够根据每个模型中的message_type字段动态选择要使用的视图类型。

我目前有这样的东西，这完全是不可扩展的：

  {{＃控制器中的每个消息}} 
 
 {{#if message.isImage}} 
 {{view App.ImageMes​​sageView}} 
 {{/ if}} 
 
 .... 
 
 {{#if message.isVideo}} 
 {{view App.VideoMessageView}} 
 {{/ if}} 
 
 {{/ each }} 
  

如何根据Ember中的模型字段动态选择视图？

解决方案

这是一个类似的问题，显示了两种方法：多个模型的对象的集合作为Ember中模板中的可迭代内容。 JS

根据属性或其类型呈现项目

我知道有两种方法：

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 
}）; 
  

模板：

 code>< UL> 
 {{#each item in controller.stream}} 
 {{#if item.isPost}} 
< li> post：{{item.name}} {{item.publishtime }}< /锂> 
 {{/ if}} 
 {{#if item.isBookmark}} 
< li>书签：{{item.name}} {{item.publishtime}}< /李> 
 {{/ if}} 
 {{#if item.isPhoto}} 
< li>照片：{{item.name}} {{item.publishtime}}< /李> 
 {{/ if}} 
 {{/ each}} 
< / ul> 
  

方法2

JS： p>

  App.StreamItemView = Ember.View.extend（{
 tagName：li，
 templateName：function （）{
 var content = this.get（'content'）; 
 if（content instanceof App.Post）{
 returnStreamItemPost; 
} else if （App.Photo的实例）{
返回StreamItemBookmark; 
} else if（content instanceof App.Photo）{
返回StreamItemPhoto; 
} 
}。 property（），
 
 _templateChanged：function（）{
 this.rerender（）; 
} .observes（'templateName'）
}）
  

模板：

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

JSBin示例 - 未排序的列表使用方法1呈现，排序列表使用方法2呈现

I have a list of items I'm trying to display with Ember. For each of these items, I'd like to be able to dynamically select the view type to use to display it based on a "message_type" field in each model.

I currently have something like this, which totally sucks and is not scalable:

{{#each message in controller}}

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

  .... 

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

{{/each}}

How can you dynamically select a view based on a model's field in Ember?

解决方案

Here is a similar question that showed 2 ways to do this: Collection of objects of multiple models as the iterable content in a template in Ember.js

rendering items based on a property or their type

I know of two ways to do this:

1. add a boolean property to each object and use a handlebars {{#if}} to check that property and render the correct view
2. extend Ember.View and use a computed property to switch which template is rendered based on which type of object is being rendered (based on Select view template by model type/object value using Ember.js)

Method 1

JS:

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

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

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

template:

<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>

Method 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')
})

template:

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

JSBin example - the unsorted list is rendered with method 1, and the sorted list is rendered with method 2

这篇关于根据模型选择视图类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！