集合内的骨干集合

Question

我在主干中有一个应用程序，在主应用程序中我有一个事件单击元素，当我单击它时，我想在其中添加另一个应用程序及其集合模型......是集合的集合。 我正在使用 require 我检索到的错误是：

Uncaught TypeError: Object [object Object] has no method 'addElement' 

这是我的主要应用程序： 型号：

define(['backbone', 'collections/element'],function(Backbone, ElementCollection){
    var DesignModel = Backbone.Model.extend({
        initialize:function(){
            console.log('Initialized Design model');
            _.defaults(this, {
                elements: new ElementCollection()
            });
        },
        addElement: function(elements, options) {
            return this.elements.add(elements, options);
        }
    });

    return DesignModel;
});

收藏：

define(['backbone', 'models/design'], function(Backbone, DesignModel){

    var designCollection = Backbone.Collection.extend({
        model: DesignModel
    });

    return designCollection;
});

查看：

define(['jquery' , 'backbone', 'models/design', 'collections/design', 'views/element'], 
    function($, Backbone,  DesignModel, DesignCollection, ElementView){
    var DesignView = Backbone.View.extend({
        el:$('#page'),

        initialize: function(){
            console.log('initialize DesignView');
            this.collection = new DesignCollection();
            var here = this;
            $('#insert-dynamic-element').click(function(){
                var element = new ElementView();
                here.collection.addElement(element); 
            });
        },
        render: function(){
        }
    })

    return DesignView;
});

要插入到 main 中的应用程序： 型号：

define(['backbone'],function(Backbone){
    var ElementModel = Backbone.Model.extend({
        defaults:{
            name:'Design',
            type:'img'
        },
        initialize:function(){
            console.log('Initialized Element model');
        }
    });

    return ElementModel;
});

收藏：

define(['backbone', 'models/element'], function(Backbone, ElementModel){

    var elementCollection = Backbone.Collection.extend({
        model: ElementModel
    });



    return elementCollection;
});

查看

define(['jquery' , 'backbone', 'models/element', 'collections/element'], 
    function($, Backbone,  ElementModel, ElementCollection){
    var ElementView = Backbone.View.extend({
        el:$('#page'),

        initialize: function(){
            console.log('initialize ElementView');
            this.collection = new ElementCollection();
        },
        render: function(){
        }
    })

    return ElementView;
});

我该如何解决这个问题？ 错误是当我在主应用程序中单击元素时，当我尝试制作 addElement

Answer 1

该方法在DesignModel 中可用，在DesignCollection 中不可用

因此，当您调用此方法时，它会在 Collection 中搜索导致错误的不存在的方法。

当您可以选择使用 Native Backbone events 处理事件时，为什么还要使用 jQuery 绑定事件

为了解决这个问题，将方法添加到集合中

define(['backbone', 'models/design'], function(Backbone, DesignModel){

    var designCollection = Backbone.Collection.extend({
        model: DesignModel,
        addElement: function(element, options) {
            return this.add(element, options);
        }
    });

    return designCollection;
});