1

ここにこのサンプル フィドルがあります - http://jsfiddle.net/pRteA/3/

問題は、ドロップダウンで選択したオブジェクトの「名前」をスパンで表示する必要があることです。SelectedUser オブジェクトに対してのみこれを行うことができません。これは、select html タグにリンクされていることと関係があるように感じます。

ただし、問題なく user.place オブジェクトを更新できます。2 つのオブジェクトが初期化された方法に大きな違いは見つかりません。

また、sampleUsers リストは実際にはサーバーから Ajax リクエストとして毎回送られてくることに注意してください。

JS:

    var sampleUsers = [{
        Name: 'a',
        Id: 1},
    {
        Name: 'b',
        Id: 2},
    {
        Name: 'c',
        Id: 3},
    {
        Name: 'd',
        Id: 4},
    {
        Name: 'e',
        Id: 5}];

    var userViewModel = {
        user: ko.mapping.fromJS({
            place: {
                country: undefined,
                continent: undefined
            },
            selectedUser: {
                Name: undefined,
                Id: undefined
            }

        }),
        userOptions: ko.mapping.fromJS([])

    }

ko.applyBindings(userViewModel);
ko.mapping.fromJS(sampleUsers, userViewModel.userOptions);​

HTML:

<div>
    <select data-bind="options: userOptions,  optionsText: 'Name', value: user.selectedUser" class="grey-border">
    </select>
</div>Update

<div>
    <span>Country</span>
    <input type='text' data-bind="value:user.place.country" />
    <span data-bind='text:user.place.country'/>
</div>    

<div>
    <span>Continent</span>
    <input type='text' data-bind="value:user.place.continent" />
    <span data-bind='text:user.place.continent'/>
</div>

</p>

</p>

4

1 に答える 1

2

いくつかの構文エラーがあり、マッピング プラグインを不適切に呼び出しています。チュートリアルをもう一度やり直したいと思うかもしれません。

これが固定フィドルです。

  1. バインド後に「配列」を変更しuserOptionsます。つまり、バインド時にはプロパティがありません。
  2. 次に、バインド後、オブジェクトの構造を変更したため、プロパティはサブスクライブされません。
  3. ()スパンのバインディング パスには、オブザーバブルを指定するために必要なものが含まれていません。
  4. のプロパティはインラインselectedUserで宣言されていますが、マッピング プラグインを介して構築されています。これは一種の無駄です。マイナーな不満。
于 2012-07-31T21:55:10.743 に答える