Question

我很可能以错误的方式处理这个问题，所以如果是这种情况，请提出替代方案。

假设我有一个用于显示许多事件的集合视图

App.EventsView = Ember.CollectionView.extend({
  contentBinding: "controller.content",
  itemViewClass: Ember.View.extend({
    templateName: "event"
  })
})

视图的模板：

<div class="event">{{ view.content.name }}</div>

并将其加载到应用

{{#if content.isLoaded}}
  {{ view "ScheduleApp.EventsView" }}
{{else}}
  Loading...
{{/if}}

现在这对于显示事件列表很有用，但我想根据它们的属性将这些事件插入到dom的某些部分中。基本上我想在这些视图上调用appendTo，但它们是由我想保留的ember魔法隐式生成的。这是可能的还是我将不得不明确定义这些视图，如果是这样，我将如何保持一切与EventsController内容同步？

Answer 1

假设您有一个事件列表，并且每个事件都有一个type属性，那么就会说出类型研讨会，音乐会和体育

App.EventsController的内容包含所有事件

App.EventsController = Ember.ArrayController.extend({
  seminars: function(){
    return this.get("content").filterProperty("type", "seminar");
  }.property("content.@each.type")
  concerts: function(){
    return this.get("content").filterProperty("type", "concerts");
  }.property("content.@each.type"),
  sports: function(){
    return this.get("content").filterProperty("type", "sports");
  }.property("content.@each.type")
})

App.BaseEventView = Ember.CollectionView.extend({
  itemViewClass: Ember.View.extend({
    templateName: 'event'
  })
})

App.SeminarsView = Ember.BaseEventView.extend({
  contentBinding: 'controller.seminars'
})

App.ConcertsView = Ember.BaseEventView.extend({
  contentBinding: 'controller.concerts'
})

App.SportsView = Ember.BaseEventView.extend({
  contentBinding: 'controller.sports'
})

App.EventsView = Ember.View.extend({templateName: 'events'});

<script type="text/x-handlebars" data-template-name="events">
  {{#if content.isLoaded}} 
    {{view App.SeminarsView}}
    {{view App.ConcertsView}}
    {{view App.SportsView}}
  {{else}}
    Loading...
  {{/if}}
</script>

现在一切都与控制器的内容同步了解计算属性

Answer 2

您可以以编程方式设置每个元素应使用哪个视图。这将允许您根据其属性更改dom。

查看API部分中的PROGRAMATIC CREATION OF CHILD VIEWS。

希望有所帮助。

如果您尝试将这些内容放入页面的不同部分，而不是仅列出它们，那么我可能会建议您查看control帮助器。

如果是这种情况，您是否可以提供一些关于DOM可能在何处使用的示例的更多信息？可能一起由不同的控制器处理它们会更好吗？

动态插入视图

2 个答案: