0

次のjsfiddleで問題を再現しました。

http://jsfiddle.net/DhgRL/2/

HTML

<h2>Edit Person Here</h2>
<div data-bind="with: EditPerson">
    <h3 data-bind="html: Name"></h3>
    <!--Uncomment line below to generate binding error. -->
    <!--<select data-bind="options:$parent.IceCreams, optionsText: Name, optionsValue: Id"></select>-->
</div>
<h2>List of People</h2>
<div data-bind="foreach: People">
    <div data-bind="click: $parent.SelectPerson">
        <h3 data-bind="html: Name"></h3>
        Favorite IceCream: <span data-bind="html: FavoriteIceCream().Name"></span>
    </div>
</div>

Javascript

function ViewModel() {
     var self = this;

    self.IceCreams = ko.observableArray([
            new IceCream(1, "Chocolate"),
            new IceCream(2, "Vanilla"),
            new IceCream(3, "Mint")
        ]);
    self.EditPerson = ko.observable(new Person("", self.IceCreams()[0]));
    self.People = ko.observableArray([
            new Person("Joe", self.IceCreams()[2]),
            new Person("Sue", self.IceCreams()[0]),
            new Person("Carl", self.IceCreams()[1])
        ]);
    self.SelectPerson = function(person){
            self.EditPerson(person);
    }
}

function Person(Name, FavoriteIceCream){
    var self = this;
    self.Name = ko.observable(Name);
    self.FavoriteIceCream = ko.observable(FavoriteIceCream);
}

function IceCream(Id, Name){
    var self = this;
    self.Id = Id;
    self.Name = Name;
}

ko.applyBindings(new ViewModel());

リストから人を選択すると、その人の名前が上に表示されます。選択した人のお気に入りのアイスクリームを選択できるドロップダウンを追加したいと思います。作業に期待するものがhtmlにコメントアウトされています。

ただし、オプションパラメータオブジェクトのコンテキストを取得する代わりに、親divのwithパラメータのコンテキストを使用しているようです。

バインディングが機能するようにselectタグを作成するにはどうすればよいですか？

4

1 に答える 1

1

optionsText文字列または関数のいずれかでoptionsValueある必要があります。詳細については、オプションのドキュメントを参照してください。

例： http： //jsfiddle.net/mbest/DhgRL/3/

于 2013-02-09T02:27:40.103 に答える