淘汰赛主细节不适用于选择

Question

here`see my fiddle

http://jsfiddle.net/kirannandedkar/JUChh/2/

当我点击名称时，它不会加载选择列表，并给出预期函数的错误。事实上，我想加载选择和值应该选择。当我在select中更改某个内容时，它应该会反映在列表中。当前ModuleId没有被填充在列表中，当我点击列表时，它不会填充选择列表。

ViewModel:

var Person = function(id, name, country,ModuleId) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
self.country = ko.observable(country); 
self.ModuleId= ko.observable(ModuleId);
return self;
};
var vm = (function() {
var people = ko.observableArray(),
selectedPerson = ko.observable();
self.editModuleId = ko.observable();
self.modules = ko.observableArray([{"Id": 1,"ModuleName": "M1"},{"Id":2,"ModuleName":"M2"}]);
getPeople = function() {
people.push(new Person(1, 'John', 'USA',1));
people.push(new Person(2, 'Mike', 'UK',1));
people.push(new Person(3, 'Dan', 'AUS',2));
},
selectPerson = function(p){
selectedPerson(p);
self.editModuleId(ko.utils.arrayFirst(self.modules(), function (data) {
console.log("item module id " + p.ModuleId());
return data.Id() === p.ModuleId();
}));
};

getPeople();
return {
people: people,
selectedPerson: selectedPerson,
selectPerson : selectPerson 
};
})();

ko.applyBindings(vm);

视图：

<ul data-bind="foreach: people">
<li data-bind="text:name, click:$parent.selectPerson"></li>
<li data-bind="text:$root.editModuleId,click:$parent.selectPerson"></li>
</ul>
<div data-bind="with:selectedPerson">
<span data-bind="text:id"></span>
<input data-bind="value:name"/>
<input data-bind="value:country"/>
<select data-bind = "options:$root.modules,value:$root.editModuleId,optionsText:'ModuleName'"/>
</div>

Answer 1

Modules observable数组包含简单的js对象，没有可观察性，因此在访问其属性时不需要放置()。将其从数据中删除。selectPerson函数中的Id：

selectPerson = function(p){
selectedPerson(p);
editModuleId(ko.utils.arrayFirst(modules(), function (data) {
console.log("item module id " + p.ModuleId());
return data.Id === p.ModuleId();
}));
};

这是工作小提琴：http://jsfiddle.net/JUChh/3/

我仔细查看了您的代码，发现editModuleId是多余的。您需要selectedPerson对象ModuleId中的属性，并且应该将下拉列表的值绑定到该属性。

以下是重构后的fiddle：http://jsfiddle.net/JUChh/18/