如何使用Knockout.js綁定一組動態jQuery Mobile按鈕？

我正在使用jQuery Mobile（jQM）和Knockout.js（ko）開發應用程序。在這個應用程序中，我需要生成可變數量的按鈕，這些按鈕由不斷更新的Web服務定義。如何使用Knockout.js綁定一組動態jQuery Mobile按鈕？

所以，在我的標記，我有：

<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();

然而，我的感覺是，有可能是一個更好的辦法。在那兒？

來源

2012-05-01 dommer

您可以手動創建和管理按鈕。我正在這樣做，當不得不經常更新按鈕。然後，我只更新我需要的任何元素（圖標，href，文本）並保持原樣。讓我知道你是否想要一個「殼」？ – frequent

我找到了解決方案。

如果我用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綁定的標籤的直接子元素。

來源

2012-05-02 12:20:52 dommer

非常非常感謝你！你救了我一天！ –

如何使用Knockout.js綁定一組動態jQuery Mobile按鈕？

回答

相關問題