0

シナリオ。データベースからのルックアップ オブジェクトのラジオ リストがあります。別のラジオ ボタンが選択されたら、画面上のテキストを更新する必要があります。値を更新することはできましたが、表示を更新することはできません。これを行うための最良の方法は何ですか？

ここに jsfiddle があります: http://jsfiddle.net/CassiusKillay/P42fA/

HTML:

<div data-bind="foreach: workExperienceLookupList">
<li> 
    <input data-bind="attr: {value: Id}, checked: $root.WorkExperienceType.Id" type="radio" name="WorkExperienceType" /> 
    <span data-bind="text: Description"> </span>
</li>
</div>   
<span data-bind="text: WorkExperienceType.Id"></span>
<span data-bind="text: WorkExperienceType.Description"></span>

脚本：

function ViewModel() {
this.WorkExperienceType = new Lookup(initialLookup); //From database
this.workExperienceLookupList = lookupList; //From database
}

function Lookup(data) {
this.Id = ko.observable(data.Id);
this.Description = ko.observable(data.Description);
this.EnDescription = data.EnDescription;
this.CyDescription = data.CyDescription;
this.IsActive = data.IsActive;
this.SortOrder = data.SortOrder;
}

var lookupList = [{
"Id": 1,
"Description": "Description 1"
}, {
"Id": 2,
"Description": "Description 2"
}, {
"Id": 3,
"Description": "Description 3"
}, {
"Id": 4,
"Description": "Description 4"
}];

var initialLookup = {
"Id": 3,
"Description": "Description 3",
};

ko.applyBindings(new ViewModel());
4

1 に答える 1

1

探している方法でオブジェクトにバインドできるのは Select のみです。この関連する回答を参照してください。ただし、以下で詳しく説明する方法、またはカスタム バインディングを使用する方法の少なくとも 2 つの方法で、探しているものを実現できます。

私がしたことは：

  • WorkExperienceTypeそれに応じて、監視可能で更新されたビューに変更されました
  • SelectedWorkExperienceType選択した作業タイプの Id を格納する新しいオブザーバブルを参照するようにビューを更新しました。
  • SelectedWorkExperienceType新しい値が選択されたときに、リスト内の適切な値を検索し、それに応じて設定するようにサブスクリプションを追加しましたWorkExperienceType。

主な変更点は ViewModel にありました。

function ViewModel() {
var self = this;

self.WorkExperienceType = ko.observable(new Lookup(initialLookup)); //From database
self.workExperienceLookupList = lookupList; //From database
self.SelectedWorkExperienceType = ko.observable();
self.SelectedWorkExperienceType.subscribe(function (newVal) {
    var item = ko.utils.arrayFirst(self.workExperienceLookupList, function(item) { 
        return item.Id == newVal; 
    });

    self.WorkExperienceType(item);
});

}

それに応じてフィドルを変更しました：http://jsfiddle.net/P42fA/22/

于 2013-07-03T16:35:12.123 に答える