骨干和jQuery滑块

Question

因此，我一直在努力争取一些时间来执行此操作。 我正在构建一个动态表单生成器工具。 功能之一是用户应该能够使用jQuery滑块来选择字体大小。 我使用Underscore模板为滑块创建div。 因此，每次用户选择Label输入时，都会加载该下划线模板，并且我会调用slider（）fn对其进行初始化。 这是执行此操作的代码部分

下划线模板

<!-- template for plain text inpt to be shown in form generate -->
    <script type="text/template" id="text-generate-template">       
        <div class="row">       
            <div class="col-sm-10">
                <input type="text"  placeholder="Enter text here" class="label-name form-control" value="<%=model.get('label')%>">
            </div>              
            <button type="button" class="close" id="remove-element" >&times;</button>
        </div>          
        <div class="row col-sm-6"  style="margin-top:10px">
            <div id="slider-<%=model.cid%>"></div>
            <small>Font Size:  <%=model.get('fontSize')%>px </small>            
        </div>  
    </script>

因此，按照代码摘要，每个动态加载的元素都有一个具有唯一ID的唯一滑块。

骨干模型从称为“元素”的基本元素扩展而来

    var TextElement = Element.extend({
            defaults:function(){
                return _.extend({}, Element.prototype.defaults,{
                    name: 'PlainText',
                    generateTemplateType: 'text-generate-template',
                    previewTemplateType:'text-template',
                    textAlign: 'center'     
                });
            }                               
        });

负责生成html的视图是

var ElementView = Backbone.View.extend({

            tagName: 'li',
            events : {              

                },
            initialize : function(){
                this.listenTo(this.model,'change', this.render);        
                this.render();
            },
            render : function(){                            
                var htmlContent =  $('#'+this.model.get('generateTemplateType')).html();                        
                var content = _.template( htmlContent, {elementType : elementTypes, model : this.model} );                                      
                this.$el.html( content );           
                me = this;                  
                if(this.model.get('name') == 'PlainText'){                      
                    this.$el.find('#slider-'+this.model.cid).slider({
                         min: 10,
                         max:40,
                         step: 1,
                         value:me.model.get('fontSize') > 9 ? me.model.get('fontSize') : 24,
                         change: function(event, ui) {
                            me.slide(event, ui.value);
                        }
                    }); 
                }

                return this;
            },              

            slide: function(event, index){                  
                console.log("the models id in slide function -> "+this.model.cid);
                this.model.set('fontSize', index);                  
            }
        });

因此，我要做的是每次检测到更改时，都会将此模型的fontSize更新为通过Slider传递的新值。

此模型所属的集合可以识别此更改并重新呈现。

如果页面上只有一个这样的元素，则一切正常。 当用户添加多个元素并尝试更改每个项目的字体大小时，仅更改最后一个元素的字体大小。 无论我滑动第一个，第二个还是第三个元素，它总是将更改设置为集合中的最后一个模型，并且使用错误的字体大小值重新渲染最后一个模型。

我尝试通过控制台在slide函数中记录模型的ID，而无论我使用哪个滑块，它似乎总是返回最后的模型ID。

我在这里做错了什么？

Answer 1

您在这里有一个意外的全局变量：

me = this;

这样做的副作用是，每个ElementView实例ElementView都将完全相同地共享me ，而me将是您实例化的最后一个ElementView 。 听起来有点熟？

解决方案是使用局部变量：

var me = this;

或者，如果您在回调中不需要滑块的this ，请改用绑定函数：

value: this.model.get('fontSize') > 9 ? this.model.get('fontSize') : 24,
change: _(function(event, ui) {
    this.slide(event, ui.value);
}).bind(this)

你也可以使用$.proxy或Function.prototype.bind如果你喜欢那些超过_.bind 。