在Marionette中顯示嵌套模型

Question

我將一個嵌套模型作爲JSON發送給Marionette應用程序。它看起來是這樣的：

{ 

    "Course1": [ 
     { 
      "id": 51, 
      "title": "Assignment1", 
      "created_at": "2013-09-01T08:47:37.908+09:00", 
      "updated_at": "2013-09-09T20:53:00.193+09:00", 
     }, 
     { 
      "id": 52, 
      "title": "Assignment2", 
      "created_at": "2013-09-01T09:11:40.547+09:00", 
      "updated_at": "2013-09-09T20:52:37.630+09:00", 
     } 
    ], 
    "Course2": [ 
     { 
      "id": 19, 
      "title": "Assignment1", 
      "created_at": "2013-08-08T22:49:26.621+09:00", 
      "updated_at": "2013-09-09T20:48:20.015+09:00", 
     }, 
     { 
      "id": 20, 
      "title": "Assignment2", 
      "created_at": "2013-08-08T23:03:58.131+09:00", 
      "updated_at": "2013-09-09T20:47:53.997+09:00", 
     } 
    ], 
    "Course3": [ 
     { 
      "id": 29, 
      "title": "Assignment1", 
      "created_at": "2013-08-18T09:22:32.299+09:00", 
      "updated_at": "2013-09-09T20:47:32.971+09:00", 
     }, 
     { 
      "id": 30, 
      "title": "Assignment2", 
      "created_at": "2013-08-18T09:33:16.882+09:00", 
      "updated_at": "2013-09-09T20:02:08.731+09:00", 
     } 
    ] 
} 

我想知道是否有某種方式來顯示每個「課程」和嵌套的課程，在木偶視圖表中的數據。根據任何要求，我不知道我會向木偶團隊發送多少課程。

有什麼方法可以迭代上面的數據（作爲Marionette應用程序中的一個集合）併爲每個課程動態地創建一個新的CompositeView？

Answer 1

我現在意識到我是多麼的愚蠢！我試圖做的是核心Backbone.Marionette功能的一部分。

我只需要在List.Courses中嵌套List.Assignments CompositeView CompositeView。

@ControlPanel.module "AssignmentsApp.List", (List, App, Backbone, Marionette, $, _) -> 

    class List.Controller extends Marionette.Controller 

    initialize: -> 
     # This is a collection of courses with nested assignments 
     # as described in the original question. 
     App.request "courses:entities", (courses) => 

     @coursesView = @getCoursesView courses 
     App.mainRegion.show @coursesView 

    getCoursesView: (courses) -> 
     new List.Courses 
     collection: courses 


    class List.Assignment extends Marionette.ItemView 
    template: "assignments/list/templates/assignment" 
    tagName: "li" 

    class List.Assignments extends Marionette.CompositeView 
    template: "assignments/list/templates/assignments" 
    tagName: "li" 
    itemView: List.Assignment 
    itemViewContainer: "ul" 

    # This is the important part... 
    initialize: -> 
     # Get the nested assignments for this particular course 
     assignments = @model.get("assignments") 
     # At this point assignments is a regular Javascript object. 
     # For this to work assignments must be a valid Backbone collection 
     @collection = new Backbone.collection assignments 

    class List.Courses extends Marionette.CompositeView 
    template: "assignments/list/templates/courses" 
    itemView: List.Assignments 
    itemViewContainer: "ul" 

Answer 2

您可以使用下劃線each函數。類似這樣的：

var data = <your JSON data here>; 

_.each(data, function(value, key, list) { 
    var compView = new <yourCustomCompositeView>({ collection: value }); 
    // render the view in whatever region you need to 
}); 

這將爲您的JSON中的每個條目創建一個新的CompositeView。下面是該函數的documenation：http://underscorejs.org/#each

更新 看看http://jsfiddle.net/craigjennings11/D2qAC/上的方式來解決這個問題。它可能不是最乾淨的，但它完成了工作。請注意，我指定了一個自定義區域，用於爲佈局重載open方法，然後撥打open將視圖附加到該區域，而不是show。 show再次致電open之前關閉該區域，這會刪除您之前的視圖。