Làm cách nào để liên kết một tập hợp các nút jQuery Mobile động bằng Knockout.js?

Question

Tôi đang sử dụng jQuery Mobile (jQM) và Knockout.js (ko) để phát triển một ứng dụng. Trong ứng dụng này, tôi cần tạo một số lượng các nút được xác định bởi một dịch vụ web cập nhật liên tục.

Vì vậy, trong đánh dấu của tôi, tôi có:

<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 là danh sách các chuỗi ngắn trở về từ các dịch vụ web. Nó được định nghĩa là:

self.buttonLabels = ko.observableArray(); 

Tất cả đều hoạt động tốt khi các nút không được "kiểu jQM". Tuy nhiên, khi tôi tạo kiểu cho chúng bằng cách sử dụng:

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

sự cố phát sinh trong quá trình cập nhật.

Vấn đề có vẻ là jQM kết thúc tốt đẹp các nút trong div (với khoảng cách anh chị em) để làm cho chúng trông đẹp mắt và di động. Tuy nhiên, khi ko áp dụng các bản cập nhật thông qua các ràng buộc, nó chỉ loại bỏ các thẻ, để lại các thứ xung quanh và thêm các thẻ nút mới - mà sau đó cũng được tạo kiểu bởi cuộc gọi kích hoạt jQM. Vì vậy, tôi kết thúc với một danh sách các nút ngày càng tăng - chỉ với bộ cuối cùng đang hoạt động (vì các nút trước đó bị gút bởi việc loại bỏ phần tử nút của chúng, nhưng tất cả kiểu dáng vẫn còn).

tôi đã quản lý để giải quyết điều này, tôi nghĩ rằng, bằng cách đặt cuộc gọi sau đây ngay sau khi quan sát được cập nhật:

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

Tuy nhiên, cảm giác của tôi là có lẽ là một cách tiếp cận tốt hơn. Lanhung?

Answer 1

Tôi đã tìm được giải pháp.

Nếu tôi bao quanh các nút bằng div, có vẻ như nó hoạt động - ví dụ:

<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> 

Tôi đoán điều này là do đánh dấu được thêm bởi jQM vẫn còn "bên trong" đánh dấu được nhân rộng bởi ko. Nếu không có div, jQM sẽ kết thúc tốt hơn thẻ tag, là thẻ con ngay lập tức của thẻ có chứa liên kết ko foreach.