如何使用 Knockout.js 绑定一组动态的 jQuery Mobile 按钮

Question

我正在使用jQuery Mobile(jQM(和Knockout.js(ko(来开发应用程序。在此应用程序中，我需要生成由不断更新的 Web 服务定义的可变数量的按钮。

因此，在我的标记中，我有：

<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
    <button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>

buttonLabels 是从 Web 服务返回的短字符串的列表。它被定义为：

self.buttonLabels = ko.observableArray();

当按钮不是"jQM 样式"时，这一切都可以正常工作。但是，当我使用以下方式设置它们的样式时：

$("#answerPage-buttons").trigger("create");

更新过程中出现问题。

问题似乎是jQM将按钮包装在一个div(具有同级跨度(中，使它们看起来都很好且移动。但是，当 ko 通过绑定应用更新时，它只会删除标签，留下周围的东西，并添加新的按钮标签 - 然后也由 jQM 触发器调用设置样式。

因此，我最终得到了一个不断增长的按钮列表 - 只有最后一组是可操作的(因为以前的按钮因删除其按钮元素而被破坏，但所有样式仍然存在(。

我认为，我已经设法通过在可观察量更新后立即发出以下调用来解决这个问题：

$("#answerPage-buttons div.ui-btn").remove();

但是，我的感觉是可能有更好的方法。有吗？

Answer 1

我找到了解决方案。

如果我用div 包围按钮，它似乎可以工作 - 例如

<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
    <div>
        <button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
    </div>
</div> 

我猜这是因为 jQM 添加的标记保留在 ko 复制的标记的"内部"。如果没有div，jQM 会包装按钮标签，该标签是包含 ko foreach 绑定的标签的直接子级。