0

我将嵌套模型作为 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 发送多少课程。

有什么方法可以迭代上面的数据（作为 Marionette 应用程序中的一个集合）并为每门课程动态创建一个新的 CompositeView？

4

2 回答 2

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，这将删除您之前的视图。

于 2013-10-10T22:00:54.743 回答
0

我现在才知道我是多么的愚蠢！我试图做的是核心 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"
于 2013-12-13T02:43:28.510 回答