0

まず第一に、私の下手な英語で申し訳ありません!

とにかく、Knockout JS と Jquery UI に基づいたシンプルなタスク マネージャーを作成しようとしています。いくつかの調査の後、KO を JqueryUi のソータブルに接続するのに役立つ小さなプラグインを見つけました。ここでそれについて読むことができます: http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html

プラグインは、監視可能な配列の順序を更新するのに非常にうまく機能しますが、配列内の位置に基づいて要素の値を更新する必要もありました。各ソート後に配列全体を更新しようとしましたが、奇妙な動作に気付きました: UI は同じままですが、配列を JSON に送信すると、正しい値で更新されます!

ここで私のコードのスニペットを見つけることができます: http://jsfiddle.net/ingro/mz3MK/

並べ替え可能なリストでいくつかの要素を移動してみて、UI と [印刷] ボタンで表示される値の違いを確認してください。

編集: 最初の要素 (test#1) をソート可能なリストの一番下に移動してみてください。要素の属性 'time' は同じ (07:00) のままです。並べ替え可能なリストの 2 番目の場所に移動すると、属性「時間」が「10:00」になっていることがわかります。実際、UI は何かをドラッグしたときにのみ更新され、ドラッグされた要素のみがドラッグ前の状態に更新されます。しかし、配列の値を出力すると、常に更新されていることがわかります:\

これについて私を助けることができる人に感謝します!

4

2 に答える 2

2

このフィドルのように、投稿のtimeプロパティを監視可能にし、更新方法を変更する必要があります。

前：

self.posts = ko.observableArray([
    {time: "07:00", title: "test#1"},
    {time: "08:00", title: "work#2"},     
    {time: "09:00", title: "task#3"},    
    {time: "10:00", title: "sleep#4"}
]);

。。

post.time = self.times()[count];

後：

self.posts = ko.observableArray([
    {time: ko.observable("07:00"), title: "test#1"},
    {time: ko.observable("08:00"), title: "work#2"},     
    {time: ko.observable("09:00"), title: "task#3"},    
    {time: ko.observable("10:00"), title: "sleep#4"}
]);

。。

post.time(self.times()[count]);

これは、プロパティが監視できないため、そのスパンに表示されるテキストのバインドが1回だけ評価されるためです。

于 2012-06-05T19:14:27.190 に答える
2

私が問題を理解したように、時間とタイトルを観察可能にする必要があります。更新されたjsfiddleを検討してください

var Post = function( time, title) {
    this.time = ko.observable( time );
    this.title = ko.observable( title );
};

それから

self.posts = ko.observableArray( ko.utils.arrayMap( posts , function( post ) {
        return new Post( post.time, post.title);
}));

そして、監視可能な更新構文を使用できます。

post.time(self.times()[count]);

また、このノックアウト todo アプリの例も参考になるかもしれませんTodoApp

于 2012-06-05T19:06:45.953 に答える