Backbone.js和underscore.js將此綁定到this.collection.add

Question

我在使用的教程上遇到問題

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

和

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

appendItem是在ribs.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 。 我沒有在任何地方定義項目。

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

appendItem似乎是多余的。 更改集合后，您似乎還想添加一個新視圖。 好的，在這種情況下，您可能希望有一個集合視圖或應用程序路由器，以將事件綁定到更改。 這個問題可能有幫助？： Backbone.Collection.Create在視圖中不觸發“添加”

希望有幫助！