Javascript 主干和jQuery滑块

所以我一直在努力找时间来做这件事。我正在构建一个动态表单生成器工具。其中一个功能是，用户应该能够使用jQuery滑块来选择字体大小。我使用下划线模板为滑块创建div。因此，每当用户选择标签输入时，就会加载此下划线模板，我调用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>

负责生成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更新为通过滑块传入的新值

此模型所属的集合会识别此更改并重新渲染自身

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

我尝试在slide函数中记录模型的id，无论我使用哪个滑块，它似乎总是返回最后一个模型id

---

我做错了什么？？？

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

me = this;

这样做的一个副作用是，

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)

您也可以使用或，如果您更喜欢这些

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