3

これがすでに言及または回答されている場合は申し訳ありませんが、私は数日間探しましたが、これを解決できません. 私は Knockout と StackOverflow の両方が初めてなので、ご容赦ください。

私はCakePHPを使用しており、コントローラーから次の形式のJSONが返されます

{"countries":[{"Country":{"id":"1","country":"England"}},{"Country":{"id":"2","country":"Wales\/Cymru"}},{"Country":{"id":"3","country":"Scotland"}},{"Country":{"id":"4","country":"Republic of Ireland"}},{"Country":{"id":"5","country":"Northern Ireland"}}]};

上記の郡がselectステートメントの項目として表示され、値が1に設定され、テキストが国として表示されることを望んでいます。しかし、私はこれを行うためにノックアウトを得ることができないようです. これはノックアウトに精通している人にとっては簡単な質問だと思いますが、何をすべきか理解できません オブジェクトのリストしか表示されませんが、データバインドのオブジェクトプロパティにアクセスする方法がわかりません

HTML

<select data-bind="options:countries, optionsText:'Country'"></select>​

Javascript

    var viewModel = {};

    var data = {"countries":[{"Country":{"id":"1","country":"England"}},{"Country":{"id":"2","country":"Wales\/Cymru"}},{"Country":{"id":"3","country":"Scotland"}},{"Country":{"id":"4","country":"Republic of Ireland"}},{"Country":{"id":"5","country":"Northern Ireland"}}]};

    var jsData = ko.mapping.fromJS(data);
    ko.applyBindings(jsData);

私は単純な JSFiddle http://jsfiddle.net/jbrr5/14/を作成して、何が起こっているかを示し、この小さな挑戦で助けていただければ幸いです

</p>

4

2 に答える 2

2

あなたのデータは奇妙な構造を持っています。こんな感じです：

- 国
  - 国
    - ID
    - 国

実際のidandcountryは、 の配列の別のレベルの深さですcountries。それらをselect要素にそのまま表示するには、いくつかのハッキングを行う必要があります。Country内部オブジェクトにマッピングした方がよいでしょう。

var mappingOptions = {
    'countries': {
        'create': function (options) {
            // map to the inner `Country`
            return ko.mapping.fromJS(options.data.Country);
        }
    }
};

var viewModel = ko.mapping.fromJS(data, mappingOptions);
ko.applyBindings(viewModel);

更新されたフィドル

于 2012-10-24T14:12:56.503 に答える
1

配列の構造が非常に複雑です。あなたの場合'Country.country'、optionsバインディングに書き込む必要がありますが、バインディングはそのような複雑な式を解析できないため、機能しません。optionsおよびoptionsTextバインディングを使用する代わりに、次を使用できますforeach。

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

ただし、データの構造を次のように変更することをお勧めします

{"countries":[{"id":"1","country":"England"}]};

またはそれに応じてデータをマップします。この場合、optionsバインディングを使用できます。

<select data-bind="options:countries, optionsText:'country', optionsValue:'id'"></select>​
于 2012-10-24T14:13:04.927 に答える