构建ember.js代码

我试图找出“正确”的方法来组织我的灰烬应用程序的一部分构建ember.js代码

基本概述：

比方说，我也有类似的定义的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是什么我为影片的集合。

这工作正常，但现在有一堆视频模型无处不在;课程（全部）和每个类别（所有属于该类别的课程）。

来源

2015-02-11 Dennis

视频可以分为多个类别吗？ – 2015-02-11 11:19:42

视频是否有多个类别的概率？ – Hrishi 2015-02-11 11:20:52

你也可以看看侧面加载视频 - 网址到我假设的视频。 – Hrishi 2015-02-11 11:23:25

我不知道你的具体用例，但是如果我设计了类似的东西，我会让我的video类具有hasMany('categories')的关系，表达了一个真实世界的概念，即视频可以用多个类别“标记” ，那么模型将是这个样子：

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的那些视频。因此，在烬产生的代码，如果由控制器上的计算性能是这样的：

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

希望这有助于。下载课程时，我会将视频与课程一起转载。

来源

2015-02-11 14:08:41 Hrishi

构建ember.js代码

回答

相关问题