21

データ (モデル) インスタンスがバインドされた対応する要素 (または複数の要素) を取得することはまったく可能ですか?

たとえば、ViewModel プロパティに「Person」オブジェクト ストアの配列があります。

ViewModel をレンダリングするビューにバインドします。

<div class="people" data-bind="template: { foreach: people }">
    <a href="#" class="person" data-bind="text: name"></a>
</div>

次に、jQuery を介していくつかのイベント ハンドラーをバインドします。

$container.on('click', '.person', function(e){
    e.preventDefault();
    self.showPerson( ko.dataFor(this) );
});

私のshowPerson方法では、モデルへの参照を保存します。要素への参照を保存/することもできますが、必要がない場合は保存したくありません。

self.showPerson = function(person) {
    // can i get the corresponding element from the 'person' model?
};

誰でもアイデアはありますか？

4

5 に答える 5

20

カスタムバインディングを簡単に作成できます

    // data-bind="element: observable"
    // sets observable to element ..
    ko.bindingHandlers.element = {
        init: function(element, valueAccessor) {
            var target = valueAccessor();
            target(element);
        }
    };

ビュー モデルで、要素を格納する「フィールド」を作成します。

person.el = ko.observable(null);

次に、htmlテンプレートで..

<div data-bind="element: el"> .... </div>
于 2014-05-13T17:47:03.167 に答える
9

jquery と '.person' の 2 番目の引数を使用した $container の構文と使用法は私にはなじみがありませんが、クリック ハンドラーでは、クリックthisされた要素ではありませんか? それを showPerson メソッドにも渡せませんか?

$container.on('click', '.person', function(e){
    e.preventDefault();
    self.showPerson( ko.dataFor(this), this );
});

self.showPerson = function(person, element) {
    // can i get the corresponding element from the 'person' model?
};

オブザーバブルがバインドされている要素を取得するための頭のてっぺんからの方法はわかりませんが、いくつかの異なる要素である可能性があります。たとえば、'name' のテキスト ボックスを作成し、スパンに名前を表示し、それを計算で使用し、サブスクライバーを持ち、別のバインディングの計算で name().length を使用することができます。

_subscriptionsそうは言っても、ノックアウトのデバッグ バージョンを使用すると、オブザーバブルに、探しているものがある可能性のあるプロパティがあることがわかります。縮小版は、私が思う単一のキャラクターです。

于 2012-05-26T06:04:58.593 に答える
5

クリック イベント バインディングを 内に移動してみませんforeachか?

<a href="#" class="person" data-bind="text: name, click: showPerson"></a>

この場合、showPerson()関数には正しいデータが含まれます。person

編集 ：

申し訳ありませんが、私はあなたの質問の核心を逃したと思います：

self.showPerson = function (person, event) {
     element = event.srcElement
     ...
}
于 2012-05-25T16:00:50.587 に答える
0 
self.showPerson = function(data, event) {
  // event.currentTarget is the DOM element
  // $(event.currentTarget) gives the jQuery element
}
于 2013-12-23T06:33:06.837 に答える