2

次のノックアウトjsコードがあります。問題は、selectedCountry 変数の値を設定できるようにしたいが、そのためには selectedCountry として select 要素にバインドする必要があることですが、初期値を取得するには、代わりにこの selectedCountry() を使用する必要があります。したがって、別のオプションが選択されたときに selectedCountry の値を更新できません。どうすればいいですか？

The code is also available here http://jsfiddle.net/xPc9J/

<!doctype html>
<html>
<head>
<script src="knockout-2.1.0.js" type="text/javascript"></script>

</head>
<body>
<p>
    Your country: 
    <select data-bind="options: availableCountries,  optionsValue: 'countryPopulation',optionsText: 'countryName',value: selectedCountry(), optionsCaption: 'Choose...'"></select>
</p>
<span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
    You have chosen a country with population 
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>

<script type="text/javascript">
    // Constructor for an object with two properties
    var country = function(name, population) {
        this.countryName = name;
        this.countryPopulation = population;    
    };        
 var sel=new country("USA", 320000000);
    console.log(sel);
    var viewModel = {
        availableCountries : ko.observableArray([
            new country("UK", 65000000),
            new country("USA", 320000000),
            new country("Sweden", 29000000)
        ]),
        selectedCountry : ko.observable(320000000) // Nothing selected by default
    };
    console.log(viewModel.selectedCountry());
    //viewModel.selectedCountry(sel);
    ko.applyBindings(viewModel);
</script>
</body>

</html>
4

1 に答える 1

0

プロパティselectedCountryには、全体ではなく、現在選択されている人口が保持され countryます。

代わりに、どこにでもselectedCountry().countryPopulation簡単に書く必要がありますselectedCountry()：

<span data-bind="text: selectedCountry"></span>.
<div data-bind="visible: selectedCountry">
    You have chosen a country with population 
    <span data-bind="text: selectedCountry() ? selectedCountry(): 'unknown'">
    </span>.
</div>​

フィドルを参照してください。

のバインディングに余分なセットがあることに注意()してください。正しい構文は次のとおりです。selectvalue

value: selectedCountry

于 2012-10-19T06:18:03.463 に答える