Question

我正在试图找出构建我的Ember应用程序的一部分的“正确”方法

基本概述：

假设我的Course模型定义类似：

var Course = DS.Model.extend({
    videos: hasMany('video', { async: true }),
    categories: hasMany('category', { async: true })
});

每个video都有category与之关联。

在我的CourseView或CourseController中，我如何获得每个类别的视频列表？

首先，我尝试使用计算属性，但是像this.get('model').get('videos')之类的任何调用都会返回Promise - 而不是我想要的。

接下来，我看到一些关于使用它的帖子，然后在Promise解析后在控制器上设置属性，因此View会在属性发生变化时更新，但这涉及到很多近乎回调的地狱和我我希望有更好的方法来解决这个问题。

在呈现视图之前，有什么方法可以“加载”视频/类别吗？理想情况下，我可以做类似的事情：

{{#each category in categories}}

    // render category-related stuff and only videos in this category

{{/each}}

将所有视频都放在类别上会更好吗？有没有什么方法可以定义/添加属性到模型而不将它们发送到服务器？我想这可以看作是关于API设计的一般性问题 - 视频应该属于类别吗？基本上会有一个课程列表，每个课程都有自己的一组类别。每个视频都必须属于一个类别。以这种方式输入后，如果所有视频都必须属于某个类别，那么将视频置于类别之下是有意义的...

编辑：这是我刚才为了时间而去的一个实现：

我的Category模型现在看起来像这样：

var Category = DS.Model.extend({
    name: attr('string'),
    description: attr('string'),
    videos: hasMany('video', { async: true })
});

在Course模板中：

...

{{#each category in model.categories}}

    {{render "course/category" category}}

{{/each}}

...

在course/category模板中：

<h2 class="sub-title">{{model.name}}</h2>

{{render "course/video-gallery" model.videos}}

其中course/video-gallery是我为视频集合构建的内容。

这很好用，但现在到处都有一堆视频模型;在课程（所有这些）和每个类别（所有属于该类别）。

Answer 1

我不知道您的具体用例，但如果我设计类似的内容，我会让我的video课程有hasMany('categories')关系，表达现实世界的概念视频可以被标记为＆＃34;有多个类别，那么模型看起来像这样：

var Course = DS.Model.extend({
  videos: hasMany('video', { async: true }),
  categories: hasMany('category', { async: true })
});

var Video = DS.Model.extend({
   categories: hasMany('category'),
    //rest of the attributes
});

var Category = DS.Model.extend({
   name: DS.attr(),
   description: DS.attr(),
   //other attributes
});

现在，您需要为每个类别添加视频列表，将其分解为更简单的问题，让我们假设您可以获取一个类别的所有视频。这很简单，我们需要做的就是获取视频列表，并在categories列表中选择具有此类别ID的视频。因此，如果在控制器上创建一个计算属性，那么在ember中生成的代码将如下所示：

videosByCategory: function() {
   var cats = this.get('categories'), //grab courses' categories.
       videos = this.get('videos');   //grab the courses' videos
  return videos.filter(function(video) {
     var videoCategories = video.get('categories');
     return Ember.EnumerableUtils.intersection(videoCategories,cats).length > 0;
   });
}.property('videos'),

现在，在模板中，如果你像这样访问这个计算属性：

{{#each video in videosByCategory}}
  //whatever goes here
{{/each}}

希望这会有所帮助。下载课程时，我会在课程中加载视频。

构造ember.js代码

1 个答案: