KnockoutJS:マッピングで生成されたObservableArray内のオブジェクトにObservableプロパティと関数を追加する
-
28-10-2019 - |
質問
KnockoutJS を初めて使用し、生成されたオブジェクトにプロパティとメソッドを追加しようとして立ち往生しています。 ko.observableArray()
プラグインによって作成されたmapping
内。
これが私がしているところです:
-
Users
のJSON配列があります - マッピングプラグインを使用して
ko.observableArray()
を作成しました - 各
User
のテーブル行を作成するテンプレートがあります。これまでのところ良いです:o)
これが私がやろうとしていることです:各
User
には、'IsActive'
というプロパティがあります-このdata-bind
プロパティを切り替える各User
オブジェクトのメソッドへのクリックイベントを'IsActive'
したいと思います。この質問は有望に見えましたが、私には不必要な重複のようですJSでビューモデル全体を宣言する必要があります(それが私がしなければならない方法でない限り!)-生成されたオブジェクトを拡張することは可能ですか?
私はこれらの方針に沿ってもっと考えていました、追加のプロパティまたはメソッドを宣言し、それらに mapping
で生成されたオブジェクトを拡張させる方法がありますが、この記事は、生成された配列内のオブジェクトを拡張するのではなく、単一のオブジェクトに関係しています。
コードは次のとおりです: http://jsfiddle.net/yZkSf/2/ (JS fiddleではまだ機能していませんが、引き続き使用し、機能するようになったらこのリンクを更新します)。
解決
検討できるオプションがいくつかあります。
-1つは、 create
コールバックを使用して「ユーザー」の方法を制御することです。 "オブジェクトが作成されます。オブザーバブルを自分で定義して機能を追加するか、個々のユーザーオブジェクトでマッピングプラグインを呼び出してから機能を追加することができます。
次のようになります: http://jsfiddle.net/rniemeyer/fkVaK/
-それ以外の場合は、viewModelに「toggle」関数を配置してから「user」オブジェクトを渡すことができます。
1.3の優れた方法は、ko.dataFor
をjQueryのライブ/デリゲート/イベント委任機能などと一緒に使用することです。次のようになります: http://jsfiddle.net/rniemeyer/FkjNr/
ジェネラコディセタグプレ
イベントの委任を使用したくない場合は、次のような匿名関数を使用してアイテムを直接渡すことができます: http://jsfiddle.net/rniemeyer/GpQtN/
編集:2.0以降、クリック/イベントバインディングを使用すると、現在のデータがハンドラーに自動的に渡されるため、次の操作を実行できます。 ジェネラコディセタグプレ
他のヒント
これは私があなたとライアンの両方の答えを使って思いついたものです...うまくいくようです。私はノックアウトに不慣れで、これが良いアプローチであるかどうか興味があるので、フィードバックを残してください。
JS: ジェネラコディセタグプレ
DOM: ジェネラコディセタグプレ
それを行う方法を見つけましたが、作成された後、配列内で生成されたオブジェクトをループすることを意味します。追加のループなしで同じ結果を達成する方法をお勧めします。
編集: RP Niemeyerが彼の答えで示唆しているように!; o)>
とにかく、既存のオブジェクトにプロパティを追加する1つの方法は、 jQuery extends()オブジェクトを結合します。
まず、新しいオブジェクトで追加のプロパティと関数を宣言します。 ジェネラコディセタグプレ
次に、ko.mapping.fromJS()
呼び出しの後、 ko.applyBindings()
呼び出しの前に、生成された配列内のオブジェクトをループして拡張します。
ジェネラコディセタグプレ