6

我正在使用 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();

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

4

1 回答 1

3

我找到了解决方案。

如果我用 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 会包装 button 标签，它是包含 ko foreach 绑定的标签的直接子标签。

于 2012-05-02T12:20:52.480 回答