構建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代碼

回答

相關問題