Question

我有下一个使用Backbone.js替换内容的代码

我不知道为什么在更换内容时复选框按钮会增长。简单地说，我使用下一个代码复选框

 $('.checkWeek').button();

Answer 1

目前代码将模板存储在div标记中 - 每次调用button时，模板都会被修改。您可以使用类型为script的{{1}}标记来避免这种情况，这样就不会将其作为Javascript执行。

现在发现：

text/template

更改为：

<div data-template-name="central-home">
    <div data-template-name="">
        <input type="checkbox" class="checkWeek" id="checkWeekM" />
        <label for="checkWeekM">L</label>
    </div>
</div>

如果Javascript保持不变，则无法找到模板。所以你还必须更新这一行：

<script data-template-name="central-home">  
    <div data-template-name="">
         <input type="checkbox" class="checkWeek" id="checkWeekM" /><label for="checkWeekM">L</label>
    </div>      
</script>

要求模板在div内删除：

 content.view = ...$.trim($("[data-template-name='"+ template_name +"'] div").html()...

Working fiddle

Answer 2

我认为原因是因为你在每次点击时都会调用$('.checkWeek').button();，所以JQuery会做一些有趣的事情并在span中添加span，这会导致大小增加。

一个简单的解决方法是，如果按钮已经存在（或显示），则不要调用$('.checkWeek').button();

// if button already exists then dont add it again.
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
      $('.checkWeek').button();

请看这里：http://jsfiddle.net/Thxtr/3/

Answer 3

我猜测$('.checkWeek').button()只需要每个.checkweek元素调用一次，或者只需要调用一次。

如果是这样，那么可能的解决方法是：

有条件地执行$('.checkWeek').button()（虽然我不确定测试可能是什么）。
使$('.checkWeek')选择器更具选择性，即只选择新添加的元素。
如果存在销毁选项，则调用$('.checkWeek').button('destroy').button()（或类似 - 您必须搜索插件的API文档）。

如果不完全了解应用程序（和插件），我无法分辨哪种可能性最合适。

当用Backbone.js替换时，带有queryui复选框按钮的内容会增长

3 个答案: