javascript - 当内容被 Backbone.js 替换时，如何解锁 jquery ui 检查按钮？

Question

我有一个可以替换内容的网络应用程序。此内容有 jquery ui 检查按钮。当我替换内容时，如果按钮已存在，则不要再次添加它:

if(!$('label[for=checkWeekM]').hasClass('ui-button'))
      $('.checkWeek').button();

如果我按下按钮(其状态已选中)并且替换内容，则按钮将开始锁定，直到再次替换相同的内容。

我使用Backbone.js来替换内容

jsfiddle

如何解锁复选按钮？

Answer 1

您正在复制id属性，这会导致糟糕的 HTML，糟糕的 HTML 会导致沮丧，沮丧会导致愤怒，等等。

您的模板中有此内容，并将其隐藏在 <div> 中:

<input type="checkbox" class="checkWeek" id="checkWeekM" />
<label for="checkWeekM">L</label>

然后将相同的 HTML 插入到 .content-central 中。现在您的页面中有两个具有相同 id 的元素属性和两个<label>指向它们的元素。当您添加 jQuery-UI 按钮包装器时，您最终会得到 <label> 的稍微修改版本。作为复选框的可见元素；但是，那个<label>将通过 for 与两个 DOM 元素关联属性和一切都崩溃了。

解决方案是停止使用 <div>来存储您的模板。如果您使用<script>相反，浏览器不会将内容解析为 HTML，并且您不会有重复的 id属性。像这样的事情:

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

然后访问 HTML:

content.view = new ContentView({
    model: content,
    template: $('#template-' + template_name).html()
});

演示:http://jsfiddle.net/ambiguous/qffsm/

这里有两个快速类(class):

1. 拥有有效的 HTML 非常重要。
2. 不要将模板存储在隐藏中 <div> s，将它们存储在<script>中s 带有 type text/html 以外的属性这样浏览器就不会尝试将它们解释为 HTML。