集合中的主干集合答案

【问题标题】：Backbone collection in collections集合中的主干集合
【发布时间】：2013-09-30 12:58:07
【问题描述】：

我正在使用主干构建我的第一个真正的 Web 应用程序，但我正在为嵌套资源而苦苦挣扎。

这是我正在使用的 json 响应的简化版本：

{
  "id": 1,
  "title": "Test Survey",
  "groups": [
    {
      "id": 1,
      "title": "Basic Questions",
      "questions": [
        {
          "id": 1,
          "title": "Which is your favorite color?"
        },
        {
          "id": 2,
          "title": "Do you have any other hobbies?"
        }
      ]
    },
    {
      "id": 2,
      "title": "Working Questions",
      "questions": [
        {
          "id": 3,
          "title": "Do you think working exp is very important?"
        }
      ]
    }
  ]
}

基本上有一个Survey对象有很多组，每个组有很多问题。

我似乎无法找到将所有这些数据放入模型/集合的好方法。

我目前拥有的是：

// Models
var Question = Backbone.Model.extend({});
var Group    = Backbone.Model.extend({});
var Survey   = Backbone.Model.extend({ url: surveyURL });

// Collections
var GroupsCollection    = Backbone.Collection.extend({});
var QuestionsCollection = Backbone.Collection.extend({});

//Views
var SurveyView = Backbone.View.extend({
  ..
});

var GroupsCollectionView = Backbone.View.extend({
  ..
});

var QuestionsCollectionView = Backbone.View.extent({
  ..
});

var survey = new Survey({ groups: new GroupsCollection({model: Group}) });   
var groupsView  = new GroupsCollectionView({collection: survey.get('groups')});

这似乎适用于在调查模型中嵌套组，但是如何将问题存储在集合中，然后将其分配给组集合中的每个模型？

如前所述，我对骨干网比较陌生，所以如果我走错了路，或者有更好的方法，请告诉我。

干杯。

【问题讨论】：

标签： javascript jquery backbone.js

【解决方案1】：

我通常将我的子集合声明为我的对象的属性（我将它们从属性哈希中删除：在您的示例中，这意味着引用 survey.groups 而不是 survey.get('groups')）并使用 model.parse 填充它们。

使用您的Survey 模型：

var GroupsCollection = Backbone.Collection.extend({
    model: Group
});

var Survey = Backbone.Model.extend({
    initialize: function(data) {
        this.groups = new GroupsCollection();
        this.parse(data);
    },
    parse: function(data) {
        if (data.groups) {
            this.groups.reset(data.groups);
        }
        return _.omit(data, 'groups');
    }
});

您的Group 类将以类似的方式声明。您将数据传递给构造函数：

var s = new Survey({
    "id": 1,
    "title": "Test Survey",
    "groups": [],
    ...
});

var g = s.groups.at(0); //first group
var q = g.questions.at(0); //first question in the first group

然后遍历您的数据以构建整个层次结构。

还有一个演示http://jsfiddle.net/nikoshr/947Vf/

【讨论】：

谢谢，您的回答很有道理。我想我可以从这里弄清楚。干杯。

【解决方案2】：

上面的答案对于我的案例来说有点重，导致我提出这个问题。这可能对其他搜索的人有所帮助。

我创建了四个系列。它们将被包含在一个集合中。一个集合视图将包含另外四个集合视图，它们的子视图（普通视图）将呈现数据。

当我创建包装集合时

new Backbone.Collection([collectionA, collectionB, collectionC, collectionD])

我收到了一个包含四个模型的集合，所有这些模型都是 Backbone 模型。在那些模型不包含我的收藏之前，这很好。

通过创建包装模型解决了这个问题，每个模型都包含我的四个集合之一。

var wrapperModelA = new Backbone.Model({ collection: collectionA });
...
var wrapperModelD = new Backbone.Model({ collection: collectionD }); 

return new Backbone.Collection([wrapperModelA, ... , wrapperModelD]);

这保留了我的集合并允许我创建嵌套集合结构而无需定义新类。

【讨论】：