Question

我正在使用主干1.1并尝试从3-5级深度树导航创建一个集合。

我的代码的简化版本如下所示。

var treeItem = Backbone.Model.extend({
    defaults : {
        'label'     : '',
        'children'  : null
    },
    initialize : function() {
        console.log('model init');
        if (_.isArray(this.get('children'))) {
            this.set({children : new treeItemCollection(this.get('children'))});
        }
    },
});

var treeItemCollection = Backbone.Collection.extend({
    model: treeItem
});

var myTree = new treeItemCollection([
    { "label" : "first", "id": 1 },
    { "label" : "second", "id": 1, "children":
        [
            { "label" : "second.first", "id" : 21 },
            { "label" : "second.second", "id" : 22 },
            { "label" : "second.third", "id" : 22, "children" : [
                { "label" : "third.first", "id" : 31 },
                { "label" : "third.second", "id" : 32 }
            ] }
        ]
    }
]);

根据我的理解，这应该正确地创建更深层次的子集合（根据我的理解，应该在构造对象时调用初始化，从而正确地创建更深层次）。

出于某种原因，情况似乎并非如此。第二级（例如。myTree.models[0].get('children')正确地是treeCollection类型的集合，但第3级（myTree.models[0].get('children').models[0].get('children')）只是参数对象中的JSON直接。

对我而言，这是最奇怪的部分，第二级可以，但第三级不是。 initialize()中的console.log是要检查的，而且非常正确，它会被触发4次，而不是6次。

我试图理解为什么第3级没有转换为集合。

Answer 1

您可以覆盖模型中的解析函数来执行此操作。

var treeItem = Backbone.Model.extend({
  defaults : {
    'label'     : '',
    'children'  : null
  },
  initialize : function() {
    console.log('model init');
  },

  parse: function(response) {
    if (response["children"]) {
       response["children"] = new treeItemCollection(response["children"]);
    }
    return response;
  }
});

这样，每次执行fetch（）或save（）时，它都会自动将您的子项（及其嵌套子项，如果存在）包装在treeItemCollection中。

但是，当您引导数据时，或者您只是使用reset（）时，这不起作用。所以你可能也想覆盖构造函数方法：

var treeItem = Backbone.Model.extend({
  //other stuff shown above

  constructor: function(attributes, options){
    options = options || {};
    options.parse = true;
    Backbone.Model.call(this, attributes, options);
  }
});

它应该适用于您的情况。

我们在很多项目中都使用过这种模式，我们很喜欢它。如果你想将它应用于所有型号/系列，并且更灵活，你可能想读这个： http://www.devmynd.com/blog/2013-6-backbone-js-with-a-spine-part-2-models-and-collections

骨干集合树创建

1 个答案: