0

ノックアウトの目に見えるバインディングには少し困惑しています。問題を示すサンプルを作成しました。主な目標は、ユーザーが「その他」オプションを選択したときに、いくつかの div (otherDetails) を表示することです。動いていない。「mySelection」フィールドが変更されているときに、表示が再評価されません。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Test</title> 

    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="Scripts/knockout-2.2.0.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

    function data() 
    { 
            this.mySelection =  ko.observable('other'); 

            this.isOtherSelected = ko.computed(function () 
            { 
                    return this.mySelection.peek() == 'other'; 
            }, this); 
    } 

    var myData = new data(); 

    $(document).ready(function () 
    { 
             $('#selections').change(function () 
             { 
                 myData.mySelection = $(this).val();         
             }); 

            dataBind(); 
    }); 

    function dataBind() 
    { 
            ko.applyBindings(myData); 
    } 
    </script> 
</head> 

<body> 
        <div> 
                <select id="selections" data-bind="value: mySelection"> 
                    <option value='one'>One</option> 
                    <option value='two'>Two</option> 
                    <option value='three'>Three</option> 
                    <option value='other'>Other</option> 
                </select> 
        </div> 
        <div id="otherDetails" data-bind="visible: isOtherSelected"> 
            <span>Some controls and stuff...</span> 
        </div> 
</body>

事前にありがとう、ヤロン。

4

2 に答える 2

0

オブザーバブルを別の方法で操作する必要があります。すべてのオブザーバブルは関数であるため、値を取得するにはそれを呼び出す必要があります。

return this.mySelection() == 'other';

それに値を割り当てたい場合は、この関数に値を渡す必要があります。

myData.mySelection($(this).val());

ここにフィドルが働いています：http://jsfiddle.net/kkGRs/

PSそこにjQuery変更ハンドラを使用する必要はありません。KO はオブザーバブルの値を自動的に更新します。リファクタリングされたコードは次のとおりです: http://jsfiddle.net/kkGRs/1/

于 2013-04-23T08:36:41.587 に答える
0

削除するだけpeek()です：
return this.mySelection() == 'other';

peek 関数はオブザーバブルの値を取得しますが、変更時に外部の計算されたオブザーバブルをサブスクライブしません。そのため、バインディングは再評価されません。

于 2013-04-23T08:25:04.037 に答える