ノックアウトバインディングを使用した選択時のイベントの変更、実際の変更かどうかを確認するにはどうすればよいですか

パーミッションUIを構築しています。パーミッションのリストがあり、各パーミッションの横に選択リストがあります。権限は、選択リストにバインドされているオブジェクトの監視可能な配列によって表されます。

<div data-bind="foreach: permissions">
     <div class="permission_row">
          <span data-bind="text: name"></span>
          <select data-bind="value: level, event:{ change: $parent.permissionChanged}">
                   <option value="0"></option>
                   <option value="1">R</option>
                   <option value="2">RW</option>
           </select>
      </div>
 </div>

ここで問題となるのは、UIが初めて入力されたときに、変更イベントが発生することです。ajax関数を呼び出し、権限リストを取得すると、権限アイテムごとにイベントが発生します。これは本当に私が望む振る舞いではありません。ユーザーが選択リストでアクセス許可の新しい値を実際に選択した場合にのみ発生させたいのですが、どうすればよいですか？

実際には、イベントがユーザーまたはプログラムのどちらによってトリガーされたかを確認する必要があります。また、初期化中にイベントがトリガーされることは明らかです。

追加のノックアウトアプローチはsubscription、すべての場合に役立つわけではありません。ほとんどのモデルでこのように実装されるためです。

1. 未定義のデータでモデルを初期化し、構造のみ (actual KO initilization)
2. 初期データでモデルを更新する (logical init like load JSON , get data etc)
3. ユーザーインタラクションと更新

キャプチャしたい実際のステップは3の変更ですが、2番目のステップでsubscription呼び出しが発生するため、次のようにイベントの変更に追加することをお勧めします。

 <select data-bind="value: level, event:{ change: $parent.permissionChanged}">

permissionChanged機能内のイベントを検出しました

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

これは単なる推測ですlevelが、数字であるために起こっていると思います。その場合、valueバインディングは文字列値でchange更新するイベントをトリガーしlevelます。したがって、level最初に文字列であることを確認することで、これを修正できます。

さらに、これを行うためのより「ノックアウト」の方法は、イベントハンドラーを使用せず、オブザーバブルとサブスクリプションを使用することです。作成しlevel、観察して、いつでも実行しまいますこれは、それにサブスクリプションを追加level、変更を。

これは、この奇妙な動作に役立つ可能性のある解決策です。変更イベントを手動でトリガーするボタンを配置するよりも良い解決策を見つけることができませんでした。

編集：たぶん、このようなカスタムバインディングが役立つかもしれません：

ko.bindingHandlers.changeSelectValue = {

   init: function(element,valueAccessor){

        $(element).change(function(){

            var value = $(element).val();

            if($(element).is(":focus")){

                  //Do whatever you want with the new value
            }

        });

    }
  };

そして、選択したデータバインド属性に以下を追加します。

changeSelectValue: yourSelectValue

私はこのカスタムバインディングを使用します（RP Niemeyerによるこのフィドルに基づいています。この質問に対する彼の回答を参照してください）。これにより、数値が文字列から数値に適切に変換されます（Michael Bestのソリューションで提案されています）。

Javascript：

ko.bindingHandlers.valueAsNumber = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function () {
                    var val = ko.utils.unwrapObservable(observable);
                    return (observable() ? observable().toString() : observable());
                },
                write: function (newValue) {
                    observable(newValue ? parseInt(newValue, 10) : newValue);
                },
                owner: this
            });
        ko.applyBindingsToNode(element, { value: interceptor });
    }
};

HTMLの例：

<select data-bind="valueAsNumber: level, event:{ change: $parent.permissionChanged }">
    <option value="0"></option>
    <option value="1">R</option>
    <option value="2">RW</option>
</select>

プリミティブ値の代わりにobservableを使用する場合、selectは初期バインディング時に変更イベントを発生させません。observableに直接サブスクライブするのではなく、changeイベントにバインドし続けることができます。

シンプルなフラグを利用して、すばやく汚い：

var bindingsApplied = false;

var ViewModel = function() {
    // ...

    this.permissionChanged = function() {
        // ignore, if flag not set
        if (!flag) return;

        // ...
    };
};

ko.applyBindings(new ViewModel());
bindingsApplied = true; // done with the initial population, set flag to true

これが機能しない場合は、setTimeout（）の最後の行をラップしてみてください-イベントは非同期であるため、applyBindings（）がすでに返されている場合、最後の行はまだ保留中です。

同様の問題が発生し、変数の型をチェックするようにイベントハンドラーを変更しました。タイプは、ページが最初にロードされたときではなく、ユーザーが値を選択した後にのみ設定されます。

self.permissionChanged = function (l) {
    if (typeof l != 'undefined') {
        ...
    }
}

これは私にとってはうまくいくようです。

これを使って：

this.permissionChanged = function (obj, event) {

    if (event.type != "load") {

    } 
}

これを試してください：

self.GetHierarchyNodeList = function (data, index, event)
{
    debugger;
    if (event.type != "change") {
        return;
    }        
} 

event.type == "change"
event.type == "load" 

ノックアウトを使用して作業している場合は、監視可能な機能ノックアウトの主要な機能を使用してください。メソッドを
使用ko.computed()し、その関数内でajax呼び出しを実行してトリガーします。