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

您可以使用下划线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。以下是该功能的文档：http://underscorejs.org/#each

<强>更新在解决此问题的方法上查看http://jsfiddle.net/craigjennings11/D2qAC/。它可能不是最干净的，但它完成了工作。请注意，我指定了一个自定义区域，该区域会重叠布局的open方法，然后调用open将视图附加到区域而不是show。 show在再次致电open之前关闭了该区域，这将删除您之前的观看次数。

Answer 2

我现在意识到我是多么愚蠢！我试图做的是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"

在Marionette中显示嵌套模型

2 个答案: