3

私はこのようなノックアウトテンプレートを持っています:

<script type="text/html" id="list">
  <ul data-bind="foreach: items">
    <li data-bind="{text: name}"></li>
  </ul>
</script>

私がこのように使用すること:

<div data-bind="
  template: {name: 'list', data: itemList}, 
  myBinding: {itemType: 'foo'}
"></div>

myBindingカスタムバインディングハンドラーがあります:

ko.bindingHandlers.myBinding = {
  init: function(element, valueAccessor) {
    var bindingValue = valueAccessor();

    alert ( bindingValue.itemType );  // alerts "foo"

    // now set up a jQuery click handler
    $(element).on("click", "li", listItemClickHandler);
  }
};

そして、イベントハンドラー:

function listItemClickHandler() {
  var bindingContext = ko.contextFor(this);

  alert( "bindingValue.itemType ???" );
});

itemTypeカスタムバインディングで提供されているように、ノックアウトを介してクリックハンドラーで親テンプレートを取得する方法はありますbindingContextか?

  • のような偽のCSSクラスを追加せず.type-foo<ul>(これが私が今行っていることです)。
  • "foo"の間に配列アイテムに格納せずにmyBinding.init()
  • クロージャー変数()を利用するためにイベントハンドラーをインライン化せずにbindingValue
  • jQueryのevent.data機能を使用せずに。それは可能ですが、それが不可能でない限り、ノックアウトのバインディングコンテキストから取得したいと思います。
4

1 に答える 1

7

バインディング コンテキストは、5 番目の引数としてバインディングに渡されます。そのため、カスタム バインディングのバインディング コンテキストを のように拡張できますcontext.$itemType = bindingValue.itemType;。サンプルはこちら: http://jsfiddle.net/rniemeyer/yeN8P/

itemTypeもう 1 つのオプションは、 がデータで利用可能であることを確認すること$parentです。これを行うには、次のようにデータをテンプレートに渡します。

template: {name: 'list', data: { items: items, itemType: 'foo' } }

したがって、 を渡すだけでなく、 とitemsを渡すようitemsになりitemTypeました。したがって、子の 1$parent.itemTypeつからは "foo" が含まれます。

サンプルはこちら: http://jsfiddle.net/rniemeyer/yeN8P/1/

于 2012-05-25T03:11:21.343 に答える