ノックアウトでバインドされたバインドの問題

Question

KnockoutJS 2.0で動作していないチェックボックスバインディングに問題があります。私はオブジェクトの配列を持っています。これらのオブジェクトのプロパティの1つは、異なるオブジェクトの配列です。子オブジェクトにはいくつかのプロパティがあり、そのうちの1つはブール値です。各親オブジェクトのリストを作成し、各親の下に子を表示します。子どものリストごとに、私は2つのビュー、読み込み専用ビューと編集ビューを持っています。読み取り専用では、booleanプロパティに基づいて項目がチェックされているかどうかを表すイメージがあります。これはうまくいき、コンソールからブール値を更新すると、私が期待しているものが見えてきます。画像が消えたり、割り当てた値に基づいて表示されたりします。編集ビューでは、画像はチェックボックスに置き換えられます。私はコンソールを介して値を更新するときと同じ動作を見ます - それが期待されるときにチェックされ、そうでないときはチェックされません。チェックボックスをオンまたはオフにすると問題が発生します。これを行うと、チェックボックスがバインドされている基本的な値は変更されません。

私のデータの基本的な考え方は次のとおりです。

[ 
    { 
     "xxx": "yyy", 
     "xxx": "yyy", 
     ... 
     "Displays": [ 
      { 
      "xxx": "yyy", 
      ... 
       "Excluded": false, 
      }, 
      { 
      "xxx": "yyy", 
      ... 
       "Excluded": true, 
      } 
     ], 
    } 
] 

はここでの問題は、ここで「確認」ということである結合

<input type="checkbox" data-bind="checked: !Excluded()" /> 

Answer 1

だ結合双方向です：バウンドプロパティには、正しいビューを生成するために読み取られる必要があるが、ときに更新することも必要ですチェックボックスをクリックします。式が読み取り専用であるときに式を使用することができますので、

<span data-bind="text: 'your name is ' + name()"></span> 

（そして、あなたは、観察をアンラップする必要があります）：結合のようにこれを比較してください。

だから、あなたはそれが「（）」を追加「アンラップ」することなく、観察可能なプロパティに直接バインドする必要があり、必要なときに、それは、両方の読み取り用と書き込み、ノックアウトによって行われます。

<input type="checkbox" data-bind="checked: Excluded" /> 

参照してください。簡単な例としてはhttp://jsfiddle.net/saurus/usKwA/です。変更時にチェックボックスのラベルがどのように更新され、モデルが更新され、レンダリングが正しくトリガされることが示されます。

値がfalseのときにチェックボックスがオンになるようにする必要がある場合は、http://knockoutjs.com/documentation/computedObservables.htmlセクションの「Writeable computed observables」で説明されているように、書き込み可能な計算オブザーバブルを追加するか、ビューモデルでは、データを送信する直前にサーバー上で実行するか、ビューモデルを生成する前にクライアントで実行します。

これが役に立ちます。

Answer 2

私はこれをbool値で処理することを断念し、選択されたオブジェクトの配列を作成し、そのように処理しました。それは最適な解決策ではありませんが、私はこれと戦うのがうんざりでした。

Answer 3

私の答えはここではゲームに少し遅れていることは知っていますが、今日この問題がありました。これは問題に関連する最も近いスレッドでしたが、それを解決する答えはないようです。だから私の解決策です。

本質的には、ノックアウトは本当にあなたのviewModel値がブール値ではなく文字列であることを望んでいますが、これは必ずしも実用的ではありません。だから、厳密にブール値で動作する "isChecked"というバインディングを作成しました。 注：これは、観測可能なプロパティでのみ機能します。次のように

ko.bindingHandlers.isChecked = { 
    getElementDeclaredValue: function (element) { 
     var declaredValue = element.getAttribute("value"); 

     // If a value is provided, we presume it represents "true", 
     // unless its explicitly "false". If no value is provided, we 
     // presume that a checked state would equal "true". 
     return declaredValue && Boolean.isBool(declaredValue) 
      ? Boolean.parse(declaredValue) 
      : true; 
    }, 

    init: function (element, valueAccessor) { 
     var updateHandler = function() { 
      var declaredValue = ko.bindingHandlers.isChecked.getElementDeclaredValue(element); 
      var elementValue = element.checked ? declaredValue : !declaredValue; 

      var modelValue = valueAccessor(); 
      var currentValue = ko.utils.unwrapObservable(modelValue); 

      if (elementValue === currentValue) 
       return; 

      if (ko.isObservable(modelValue)) { 
       modelValue(elementValue); 
      } 
     }; 

     ko.utils.registerEventHandler(element, "click", updateHandler); 
    }, 

    update: function (element, valueAccessor) { 
     var elementValue = ko.bindingHandlers.isChecked.getElementDeclaredValue(element); 
     element.checked = elementValue === ko.utils.unwrapObservable(valueAccessor()); 
    } 
}; 

2つのブールメソッド（「解析」と「isBool」）が定義されています。

Boolean.isBool = function (value) { 
    return (/^(?:true|false)$/i).test(value); 
}; 

Boolean.parse = function (value) { 
    return (/^true$/i).test(value); 
}; 

私はビルトインを変更すべきではないと言うコメントを無視しますオブジェクトのプロトタイプ。私はよく気をつけてください;-)。

使用法はチェックバインディングと同じです。これは、誰かを助け

<input type="radio" id="rbNewClaim" name="ClaimType" value="false" data-bind="checked: isExistingClaim" /> 

希望を：あなたがチェック状態が偽表現したい場合を除き、「値」属性は、オプションです。