1

私のJSには、ノックアウトマッピングプラグインを使用して結果のjsonをバインドする次のajax呼び出しがあります。

$.getJSON("/Game/GetRack", function (data) {
    game.rack = ko.mapping.fromJS(data);
    ko.applyBindings(game.rack, $('.rack')[0]);
});

/Get/GetRack戻り値：

[{"Color":3,"Letter":"a","Points":5},null,null]

ご覧のとおり、配列にはオブジェクトが 1 つしかありません。他の 2 つはヌルです。

ノックアウトマッピングを使用して、次のことができます。

ko.mapping.fromJS([null, { Color: 55, Letter: "b", Points: 88 }, null], game.rack);

そうすることでビューが正しく更新され、2 番目の位置に文字 B しか表示されなくなりました。他の 2 つはヌルです。

私の質問は、mapping.fromJS を使用せずに特定の位置の値を更新できますか?

したがって、インデックス 0 に文字 A があると仮定すると、2 番目の null を に変更し
{ Color: 55, Letter: "b", Points: 88 }
、UI を自動的に更新してこの変更に似せたいと考えています。これはどのように行うことができますか？

編集：

John Earles の例を参考にすることにしました。残念ながら、私の配列は 2 次元であるため、まだ問題があります。

ここにサンプルがあります: http://jsfiddle.net/wgZ59/29/
(これは John Earles の例に非常に似ていますが、2 次元配列が含まれています)。

変更ボタンをクリックしても要素の値が変更されない理由を誰かが指摘できますか? HasMutated() を呼び出さずに値を変更することもできますか?

そして最後のもの (前の 2 つが解決された場合のみ)。HTMLテーブルを静的に作成することは可能ですか（たとえば、常に3x3になることがわかっているため、3行3列の2つの印刷テーブルが必要であり、個々のセルをマトリックスセルにバインドします。すでに試しましたが、ノックアウトにはセルの値がなかったため、問題が発生しました...

EDIT2：

上記の質問に自分で答えることができました。フィドルの例は次のとおりです。

http://jsfiddle.net/wgZ59/44/

したがって、次のように配列を宣言すると、静的テーブルを作成して個々のセルをバインドできます。

self.matrix = ko.observableArray([[0,0,0],[0,0,0],[0,0,0]]);

また

self.matrix = ko.observableArray([[,,],[,,],[,,]]);.

値を更新でき、静的テーブルでは機能しますが、動的テーブル (ノックアウトによって動的に作成される) では機能しません。フィドル ページ (この編集の冒頭にあるリンク) で動作を確認できます。「変更」ボタンを押しても、動的に作成されたテーブルの値が更新されない理由を知っていますか?

4

1 に答える 1

2

あなたが何をしようとしているのか正確にはわかりませんが、game.rack が observableArray の場合、JavaScript を使用して操作できます。

observableArrays のドキュメント ページは次のとおりです。

http://knockoutjs.com/documentation/observableArrays.html

そのページには、observableArray 自体で使用できる「ヘルパー」メソッドが表示されます。さらに、基になる配列を操作できますが、observableArray で「valueHasMutated()」を呼び出して、登録済みのリスナーに変更を知らせる必要があります。

操作を示す単純な JSFiddle を次に示します。

http://jsfiddle.net/jearles/wgZ59/8/

于 2012-02-26T18:12:20.450 に答える