Question

我在使用

的教程时遇到问题

this.collection.bind('add',appendItem)

和

this.collection.bind('add',appendSet)

appendItem是在一个视图集合的backbone.js视图中定义的函数。相同的appendSet问题是我想通过嵌套模型扩展教程，但是当我添加一个项目时，如果我使用上面的行，我将appendItem和appendSet绑定到add函数，所以add函数赢了我不知道应该是什么。

（快速提醒一下绑定的作用：http://underscorejs.org/#bind）

那我该如何使用

this.collection.add(thisItem)

仍然避免绑定问题。 简而言之：有没有办法调用this.collection.add（thisItem）并告诉add函数关键字'this'应该引用appendItem而不使用bind函数？

如果要求我可以包含我的代码，但我认为它有点长而且不实用，反正可能无用。

编辑：

我的代码的逻辑是这样的。项是具有多个属性的模型以及与其关联的集合的集合。我只是按照一个教程和他得到这些对象的方式来渲染他使用this.collection.bind（'add'，appendItem），这样当你调用this.collection.add时，将调用appendItem。以下是appendItem的代码：

appendItem: function(item){
       alert("append exercise called in allExerciseview");
       var itemView=new ItemView({
         model: Item
       });
       $('ul',this.el).append(itemView.renderItem().el);
      }

我找不到this.collection.add的源代码，但我假设在该函数中有这个引用appendItem调用appendItem函数。 简而言之：原因在于此代码：

this.collection.bind('add',appendItem)

使你在打电话时

this.collection.add(thisItem)

它也会运行

thisItem.appendItem()

取消绑定它们，只运行this.collection.add（thisItem），然后分别运行thisItem.appendItem（）对我不起作用。

我的样本代码：

(function($){
    Backbone.sync = function(method, model, success, error) {
        success();
    };

    var Set = Backbone.Model.extend({
        defaults: {
            SetName:"Set "
            //more properties...
        },
        initialize: function(){
            alert("you've created a new set");
            this.bind("error",function(model,error){
                alert(error);
            });
        }
    });

    var SetCollection = Backbone.Collection.extend({
        model:Set
    });

    var SetView = Backbone.View.extend({
        events: {
            'click button.deleteSet': 'removeSet'
        },
        initialize: function(){
            alert('initialize called in setview');
            _.bindAll(this,'renderSet', 'unrenderSet', 'removeSet');
        /*this.model.bind('change',this.renderSet);
         this.model.bind('remove',this.unrender); Not sure if I should do this*/
            return this; //apparently for chainable calls    
        },
        renderSet: function(){
            alert('renderset called in setview');
            $(this.el).html('a set template'); //add button after so you can test delete
            return this;
        },
        unrenderSet: function(){
            alert('unrenderset called in setview');
            $(this.el).remove();
        },
        removeSet: function(){
            alert('removeset called in setview');
            this.model.destroy();
        }
    });

    var AllSetView = Backbone.View.extend({
        el: $('body'), //el attaches to existing element <-- what does this mean?
        events: {
            'click button#addSetButton': 'addSet'
        },
        initialize: function(){
            alert('initialize called in allsetview');
            _.bindAll(this,'renderAllSet', 'addSet', 'appendSet');
            this.collection = new SetCollection();
            this.collection.bind('add', this.appendSet); // Problem here...
            this.counter = 0;
            this.renderAllSet(); 
        },
        renderAllSet: function(){
            alert('renderallset called in allsetview');
            var self = this; 
            $(this.el).append('<button id="addSetButton"> Add Set </button>');
            $(this.el).append('<ul></ul>');
            _(this.collection.models).each(function(set){ //in case collection is not empty
                self.appendSet(set);
            },this); 
        },
        addSet: function(){
            alert('addSet called in allsetview');
            this.counter++;
            var thisSet = new Set();
            thisSet.set({SetName:thisSet.get('SetName')+this.counter});
            this.collection.add(thisSet); //add is a function defined for the collection
        },
        appendSet: function(item){
            alert("append set called in allsetview");
            var setView = new SetView({
                model: Set //DO NOT CAPITALIZE!!!... or do capitalize?... ack
            });
            $('ul',this.el).append(setView.renderSet().el);
        }
    });

    var allsetview = new AllSetView(); //for testing

    var Item = Backbone.Model.extend({
        defaults: {
            ItemName: 'Enter an Item'
            //more properties
        },
        initialize: function(){
            alert('youve created a new item');
            var set1 = new Set();
            var setCollection = new SetCollection([set1]);
            this.set({sets:setCollection});
            this.bind("error",function(model,error){
                alert(error);
            });
        }
    });

    var ItemCollection = Backbone.Collection.extend({
        model:Item
    });

    var ItemView = Backbone.View.extend({
        events: {
            'click button.deleteItem': 'removeItem'
        },
        initialize: function(){
            alert('initialize called in itemview');
            _.bindAll(this,'renderItem', 'unrenderItem', 'removeItem');
            //this.model.bind('change',this.renderItem);
            //this.model.bind('remove',this.unrender); Not sure if I should do this
            return this; //apparently for chainable calls    
        },
        renderItem: function(){
            alert('renderitem called in Itemview');
            $(this.el).html('an item template'); //add button after so you can test delete
            return this;
        },
        unrenderItem: function(){
            alert('unrenderitem called in itemview');
            $(this.el).remove();
        },
        removeItem: function(){
            alert('removeItem called in itemview');
            this.model.destroy();
        }
    });

    alert ("before itemview creation");
    var itemview = new ItemView();
    alert ("now after");

    var AllItemView = Backbone.View.extend({
        el: $('body'), //el attaches to existing element <-- what does this mean?
        events: {
            'click button#addItemButton': 'addItem'
        },
        initialize: function(){
            alert('initialize called in allitemview');
            _.bindAll(this,'renderAllItem', 'addItem', 'appendItem');
            this.collection = new ItemCollection();
            this.collection.bind('add', this.appendItem); //Problem here
            this.counter = 0;
            this.renderAllItem(); 
        },
        renderAllItem: function(){
            alert('renderallitem called in allitemview');
            var self = this; //why
            $(this.el).append('<button id="addItemButton"> Add Item </button>');
            $(this.el).append('<ul></ul>');
            _(this.collection.models).each(function(item){ //in case collection is not empty
                self.appendItem(item);
            },this); //what is this function
        },
        addItem: function(){
            alert('addItem called in allitemview');
            this.counter++;
            var thisItem = new Item();
            thisItem.item({ItemName:thisItem.get('ItemName')+this.counter
            });
            this.collection.add(thisItem); //add is a function defined for the collection
            this.appendItem(thisItem);
        },
        appendItem: function(item){
            alert("append item called in allItemview");
            var itemView = new ItemView({
                model: Item //DO NOT CAPITALIZE!!!... or do capitalize?... 
            });
            $('ul',this.el).append(itemView.renderItem().el);
        }
    });
})(jQuery);

Answer 1

我认为你的目标是渲染某种层次结构。

首先：在appendItem函数中，itemView的模型不应该是model:item而不是model:Item。我没有在任何地方看到Item定义。

接下来，您为什么不使用？：http://backbonejs.org/#Collection-add

appendItem似乎是多余的。您的集合更改后，您似乎还想添加新视图。那么在这种情况下，您可能希望为应用程序创建一个视图，用于将事件绑定到更改的应用程序。这个问题可能会有所帮助？：Backbone.Collection.Create not triggering "add" in view

希望有所帮助！

Backbone.js和underscore.js将此绑定到this.collection.add

1 个答案: