Backbone.js 主干从视图调用模型方法

我有一个带有require的主干应用程序，我想在其中添加一个集合，在模型中添加一个方法。 我已尝试在集合中插入该方法，但无法添加元素。 当我单击要在我的应用程序中添加的应用程序外部的元素时，我希望创建一个应用程序集合

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

收藏：

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

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

    return designCollection;
});

看法

我尝试以这种方式调用函数addElement：

here.collection.models.addElement(element);

及

但总是错误的，对象没有方法加法 我怎样才能解决这个问题？我想从视图中调用addElement方法，在集合中的另一个应用中添加一个应用

---

谢谢

好吧，你需要的是一个特定的模型，而不是它们的数组。这似乎是一个错误，因为您基本上是任意选择一个特定模型（除非您的应用程序具有支持这一点的语义），但这会起作用：

here.collection.at(0).addElement(element);

---

调用该方法最安全的方法是将该方法添加到集合中，而不是添加到模型中。当前，该方法在模型实例上可用

所以

这个.collection.models.addElement

不会删除它

收藏

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

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

    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;
});

如果不想从当前模型中移动方法。然后，您可能必须使用索引调用特定的模型

here.collection.at(0).addElement(element);

但在集合中可能没有模型，这可能会导致出现错误情况

here.collection.at(0) && here.collection.at(0).addElement(element);

---

如果可能，您建议将什么更改为逻辑？错误：未捕获类型错误：无法调用Undelinedwell的“addElement”方法，通常您的UI将允许用户选择他们所指的设计模型。例如，显示了一个设计模型列表，每个模型都有自己的“添加元素”按钮。或者，您可以选择一个单选按钮，或沿着这些线的东西。但总体思路是，影响模型显示的窗口小部件必须在UI中与该模型明确关联，而不是与包含的集合关联。是的，正如@Sushanth所指出的，当集合为空时，这就是边缘情况。好的，但问题是，如果我使用Sushanth的代码，则不会出错，但是如果我把我的应用程序console.log记录下来，我看不到模型中添加的元素……是的，在另一个问题（几天前）中，你回答得很好，但工作不正常，因为不向模型中添加元素看起来像是在同一模型中使用

模型内部和集合

和

集合

，这将导致循环依赖。您的最后一行工作正常，但如果I console.log my app，我没有看到添加的元素…总是空的，因为从来没有调用addElement，我在函数中放了一个console.log，没有出现在控制台中。您可以创建一个小的工作小提琴。让我们看看到底是什么问题\

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;
});

here.collection.at(0).addElement(element);

here.collection.at(0) && here.collection.at(0).addElement(element);