Question

我遇到了与Backbone中的函数迭代相关的问题。

    //View
    var PanelView = BlockView.extend({ 
        //BACKBONE PROPERTIES AND FUNCTIONS 
            className   : 'panel', 
            initialize  : function(){ 
                            BlockView.prototype.initialize.call(this);
                         }, 
            //RENDERING FUNCTIONS FOR THINGS WITH COLLECTIONS
            render      : function(){ 
                            //check special properties 
                            this.$el.css(this.model.get('css')); 
                            this.renderType(); 
                            //render data from the blocks 
                            if(this.model.get('collection')){
                                this.model.get('collection').each(this.renderBlock, this);
                            }else{
                                this.renderBlock(this.model.get('block')); 
                            }
                            //return to the dialog 
                            return this; 
                         }, 
            renderBlock : function(block){
                            var view = block.get('view'); 
                            var blockView = new view({model:block}); 
                            this.$el.append(blockView.render().el); 
                          },
            renderType : function(){
                            //if there is a collection, change the css of the blocks according to the display type of the panel. 
                            if(this.model.get('collection')){ 
                                alert('rendering type');
                                switch(this.model.get('display').type){
                                    case 'rows':    
                                        //change css of blocks to be in rows 
                                        this.model.setRows();           
                                        break; 
                                    case 'columns':
                                        this.model.setColumns(); 
                                        break;
                                    case 'grid':
                                        this.model.setGrid();  
                                };                                          
                            }                           
                          }         
    }); //View 

//Model function
    setColumns  : function(){
                    if(this.get('collection')){                 
                        var block = this.get('collection').at(0); 
                        block.get('css').width = 500 + '%'; 
                        console.log(this.get('collection').at(0)); 
                    }
    },

这似乎很简单，到目前为止这个或每个。

每个功能都正常工作，直到我遇到这个具体问题。出于某种原因，这是改变多个块的css值，即使它不应该。

此函数未被多次调用，只发生一次。即使我在控制台中检出变量，它也会在集合中返回一个块。

任何人都可以帮我确定为什么这段特定的代码会迭代多个对象？

我会附加所有代码，但多个页面长。这是唯一似乎运行奇怪的代码片段。任何帮助，将不胜感激！

Answer 1

不要在每个函数调用中将其作为参数传递

    .each(this.renderBlock, this);

您发送的不是项目，而是上下文。我想如果你通过项目应该工作正常。

    .each(this.renderBlock, item, this);

Answer 2

我发现问题是

block.get('css').width = 500 + '%';

实际上正在修改Block原型。每种类型的块都会扩展Block及其基本CSS。由于他们没有自己的CSS，他们只需使用原型css对象。更改block.get（'css'）。width调用并更改该属性，因此更改所有块。

我通过使用block.set（css：{width：500 +'％'}）修复了它，它将其设置在该特定块上。

现在我知道为什么必须设置：D

骨干收集。＆＃39; at（index）＆＃39;正在返回多个项目

2 个答案: