javascript - カスタムバインディングノックアウトでモデルプロパティにアクセスする方法

Question

jquery uiタブにknockout.jsカスタムバインディングを使用しています。サンプルフィドルを作成します

http://jsbin.com/ikidiw/7/edit

ここでは、allBindingsAccessor を介してカスタム バインディングで現在のモデル オブジェクトの currentSelectedTab プロパティを設定しようとしています。しかし、モデル オブジェクトに currentSelectedTab 関数がないというエラーが発生します。どうしたの ？

Answer 1

http://knockoutjs.com/documentation/custom-bindings.htmlによると、init 関数のシグネチャは次のようになります。

init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)

ここで、viewModel は ko.applyBindings に渡されたモデル オブジェクトです。そのため、init 関数パラメーターの allBindingsAccessor の後にその viewModel パラメーターを追加した後、次の方法でコードを変更できます。

それ以外の

allBindingsAccessor().currentSelectedTab(ui.index);

あなたは書ける

viewModel.currentSelectedTab(ui.index);

Answer 2

現在のモデルにアクセスする場合は、現在のビュー モデル オブジェクトとなる 4 番目の引数を使用して init 関数を拡張する必要があります (ドキュメントを参照してください)。

init: function (element, valueAccessor, allBindingsAccessor, viewModel) {   
      var options = ko.utils.unwrapObservable(valueAccessor() || {});

      options.select = function (event, ui) {
            viewModel.currentSelectedTab(ui.index);

      };          
      $(element).tabs(options);            
    }

ここで試すことができます: http://jsbin.com/uwajus/1/edit

Answer 3

問題は、バインディング アクセサー ポインターではなくビューモデル名で値にアクセスしようとしているように思われます。

あなたはそれを試すことができます:
HTML

<div id="ccftabs" class="uitab" data-bind="tab : { selected : currentSelectedTab }">

そしてJavascriptで

  var options = ko.utils.unwrapObservable(valueAccessor() || {});
  options.select = function (event, ui) {
    options.selected(ui.index);       
  };

  $(element).tabs(options);

これは良い方法だと思います。