Отображение вложенных моделей в марионетке

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 по любому запросу.

Есть ли способ перебора данных выше (как коллекция в приложении Marionette) и динамически создавать новый CompositeView для каждого курса?

Answer 1

Я понимаю, насколько я был глуп! То, что я пытался сделать, - это часть основной функции Backbone.Marionette.

Мне нужно было только в гнездо List.Assignments CompositeView внутри List.Courses 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

Вы можете использовать функцию Underscore 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 
}); 

Это создаст новый CompositeView для каждой записи в вашем JSON. Вот documenation для этой функции: http://underscorejs.org/#each

Update Взгляните на http://jsfiddle.net/craigjennings11/D2qAC/ на пути решения этого. Это может быть не самое чистое, но оно выполняет свою работу. Обратите внимание, что я указываю пользовательский регион, который перегружает метод open для макета, а затем вызывает open, чтобы прикрепить представления к региону вместо show. show закрывает область перед вызовом open, что позволит удалить предыдущий вид.