0

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

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

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 内容保持同步？

4

2 回答 2

2

假设你有一个事件列表，每个事件都有一个类型属性，类型是研讨会、音乐会和体育

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>

借助计算属性，现在一切都与控制器的内容同步

于 2013-03-01T06:47:34.973 回答
1

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

查看API 部分中的子视图的程序创建。

希望有帮助。

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

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

于 2013-03-01T01:51:34.843 回答