0

我有一个与 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 值，即使它不应该这样做。

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

谁能帮我确定为什么这段特定的代码会遍历多个对象？

我会附上所有的代码，但它有多个页面。这是唯一似乎运行异常的代码。任何帮助，将不胜感激！

4

2 回答 2

0

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

    .each(this.renderBlock, this);

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

    .each(this.renderBlock, item, this);
于 2013-04-02T18:30:16.080 回答
0

我发现问题是

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

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

我通过使用 block.set(css:{width: 500 + '%'}) 将其设置在该特定块上来修复它。

现在我知道为什么 set 是必要的：D

于 2013-04-02T18:47:29.343 回答