1

Knockoutと組み合わせたJQueryMobileでいくつかの問題が発生しています。実際、両方のフレームワークは私にとってまったく新しいものなので、実際に何がうまくいかないのか、ここで少し迷っています。

どちらのフレームワークも私にとっては新しいので、Knockout Webサイトからチュートリアル（todoリスト）の1つを選び、それをJQueryMobileと組み合わせることにしました。これまでのところ、単純なHTMLを少し除いて、元のチュートリアルコードにカスタムコードを追加することはあまりありませんでした。jsFiddleでこの例を確認してください：http：//jsfiddle.net/nHhHV/2/

よく見ると、ノックアウトが新しいアイテムをリストに追加していることがはっきりとわかります。しかし、一瞬後、JQuery MobileはそのHTMLを完全に再レンダリングし、フォームを台無しにしているようです。JQuery Mobileがなくても、正常に機能します。

誰かがこれの解決策を知っていますか？フォームをKnockoutで機能させたいのですが、JQMの外観は維持します。私は両方のフレームワークに慣れていないので、何がうまくいかないかについて少し詳しく説明していただければ幸いです。前もって感謝します...

4

2 に答える 2

2

問題は、jQuery mobileがフォームを送信していると見なしていることですが、これを防ぐ必要があります。

最善の解決策はここにあると思います：jquerymobileとノックアウトフォームはバインディングを送信します

clickまたは、ハンドラーと汎用イベントハンドラーをアタッチしてkeydown、リターンキーをキャプチャすることもできます。

于 2012-09-26T22:43:34.873 に答える
2

スタイリングを失うことについてのあなたのコメントに答えて、それはコンテンツが変更された後にリストビューが更新されないことに起因していると思います。$（element）.listview（'refresh'）;を使用してこれを行うことができます。または、カスタムバインディングを追加することもできます。

ko.bindingHandlers.mobileList = {
'update': function (element, valueAccessor) {
    setTimeout(function () { //To make sure the refresh fires after the DOM is updated
        console.log("listview refresh");
        $(element).listview('refresh');
    }, 0);
}
};

データバインディングをから変更します

<ul data-bind="foreach: tasks, visible: tasks().length>

に

<ul data-bind="mobileList: tasks, foreach: tasks, visible: tasks().length>
于 2012-09-27T13:54:34.137 に答える