0

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

jsfiddle

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

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

3 回答 3

1

目前代码将模板存储在div标签中 - 每次调用button模板时都会修改。您可以通过使用script带有类型的标签来避免这种情况，text/template这样它就不会作为 Javascript 执行。

现在：

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

改成：

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

在 Javascript 未更改的情况下，将找不到模板。所以你还必须更新这一行：

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

删除了对模板位于 div 内的要求：

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

工作小提琴

于 2013-02-05T20:58:41.747 回答
1

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

一个简单的解决方法是$('.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/

于 2013-02-05T21:05:04.250 回答
0

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

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

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

如果没有对应用程序（和插件）有更全面的了解，我无法判断哪种可能性最合适。

于 2013-02-05T21:02:42.297 回答