0

JavaScript オブジェクトと KnockOutJS を使用してオプションを選択するための正しい構文がわかりません。以下の例はhttp://knockoutjs.com/documentation/options-binding.html、例 3 から直接取得しました。

<p>
    Your country: 
    <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>
</p>

<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 viewModel = {
        availableCountries : ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ]),
        selectedCountry : ko.observable() // Nothing selected by default
    };
</script>

備考にあるように、selectedCountry には何も選択されていません。デフォルトで米国を選択したいとしましょう。

私はこれを試しました：

selectedCountry : ko.observable([availableCountries()[1]])

そして、私はこれを試しました：

selectedCountry : ko.observable([new Country("USA", 320000000)])

私はおそらく本当に明白な何かを見逃しているだけです（私はひどい風邪と戦っています）...誰か私の見落としや誤解を指摘してもらえますか？

4

1 に答える 1

0

あなたが直面している問題は、ビュー モデルを JavaScript オブジェクト リテラルとして宣言する際の制限です。あなたがしようとすると：

selectedCountry : ko.observable([availableCountries()[1]])

それはと同等です

selectedCountry : ko.observable([this.availableCountries()[1]])

オブジェクト リテラルはまだ完全に宣言されていないため、「this」は実際には「availableCountries」関数を持たない外部スコープ (この場合はグローバル) を指しています。試してみると：

selectedCountry : ko.observable([viewModel.availableCountries()[1]])

閉じ } ブラケットが検出されるまで、viewModel がまだ定義されていないという別の問題に遭遇します。

ここでのより良いアプローチは、次のように関数宣言 (または「コンストラクター」宣言) を使用することです。

var viewModel = function(){
   var self = this;
   self.availableCountries = ...
   self.selectedCountry = ko.observable(self.availableCountries()[1]);
}

var myViewModel = new viewModel();

これにより、構築時にすべての内部参照が存在できるようになります。ビュー モデルに親スコープまたは子スコープから呼び出されるイベント ハンドラーがある場合は、いくつかの参照の問題も処理されます。

お役に立てれば！

于 2013-06-23T03:57:14.597 に答える