0

チェックボックスをオーバーライドし、よりきれいな「トグル」の外観を提供するサードパーティのカスタム jquery コンポーネントがあります。コンポーネントには、ユーザーがコンポーネントをクリックするたびに発生する関数コールバックがあります。

イベントが呼び出されているビュー モデルのプロパティを具体的に知らなくても、イベント ターゲットを使用して観察可能な値を設定するにはどうすればよいですか。

例えば：

HTML は次のとおりです。

<input type="checkbox" id="cb123" data-bind="checked: IsDeleted" />
<input type="checkbox" id="cb345" data-bind="checked: IsValid" />

Javascript コールバックは次のようなものです。

$(document).ready(function() {
     .... Code snipped  ....
     var viewModel = ko.mapping.fromJS(myModel);
     ko.applyBindings(viewModel);

      $(':checkbox').toggleCheckbox({
           onChange: function($el, value, e) {
              var ctx = ko.contextFor(e.target);    // Gets me the knockout context object.

              // How do I set the appropriate observable value from here?
              // In this case either one of the checkboxes could have been triggered.
           }
      });
});

どんな助けでも大歓迎です。

4

2 に答える 2

1

オブザーバブルを取得する1つの方法は、データバインド属性自体を解析することです。

// inside your event handler
var viewModel = ko.dataFor(e.target);
var bindValue = $(e.target).data('bind');
// in case you applied 'checked' binding only: data-bind="checked: IsDeleted"
var observableName = $.trim(bindValue.split(':')[1]);

// get value
var _value = viewModel[observableName]();
// set value: viewModel[observableName](newValue);
于 2013-01-16T19:49:21.490 に答える
0

カスタム bindingHandler を使用して toggleCheckbox を初期化することを検討してください。

<input type="checkbox" id="cb123" data-bind="toggleCheckboxChecked: IsDeleted" />
<input type="checkbox" id="cb345" data-bind="toggleCheckboxChecked: IsValid" />

Javascript:

ko.bindingHandlers.toggleCheckboxChecked = {
   init: function (element, valueAccessor) {
       // This is just to set the initial value of the checkbox
       element.checked = ko.utils.unwrapObservable(valueAccessor());

       // Then turn the element into an enhanced checkbox
       $(element).toggleCheckbox({
           onChange: function($el, value, e) {
              var checkedBinding = valueAccessor();
              checkedBinding(value);
           }
       });
   },
   update: function (element, valueAccessor) {
       // this is invoked by knockout when checkedBinding changes, so
       // to get a two-way-binding you need to update the checkbox component
       // here with ko.utils.unwrapObservable(valueAccessor())
   }
}

公式ページにはカスタム バインディング ハンドラーに関する情報がいくつかありますが、 rniemeyer のブログ、特にこの投稿もお勧めします。

于 2013-01-17T19:01:02.560 に答える