Backbone.js和undercore.js将其绑定到this.collection.add

Backbone.js and underscore.js binding this to this.collection.add

本文关键字:js this add 绑定 collection undercore Backbone      更新时间:2024-01-27

我在使用的教程中遇到问题

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

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

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

(关于绑定功能的快速提醒:http://underscorejs.org/#bind)

那么我如何仍然使用

this.collection.add(thisItem)

并且仍然避免了绑定问题简而言之:有没有一种方法可以在不使用绑定函数的情况下调用this.collection.add(thisItem)并告诉add函数关键字"this"应该指appendItem?

如果需要,我可以包含我的代码,但我认为它有点长,有点笨拙,而且可能无论如何都没有用处。

编辑:

我的代码的逻辑是这样的。项是一个具有多个属性和与其关联的集合的模型。我只是在学习一个教程,他让这些对象呈现的方式是使用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);

我认为您的目标是呈现某种层次结构。

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

接下来,为什么不使用?:http://backbonejs.org/#Collection-添加

appendItem似乎是多余的。您似乎还希望在更改集合后添加一个新视图。在这种情况下,您可能希望为集合或应用程序提供一个视图,将事件绑定到更改。这个问题可能会有所帮助?:Backbone.Collection.Create not triggering;添加";在视图

希望能有所帮助!