淘汰赛主细节不适用于选择 [英] Knockout master detail not working with select
问题描述
here`see my fiddle
http://jsfiddle.net/kirannandedkar/JUChh/2/
当我点击名称时,它不会加载选择列表并给出预期功能的错误.其实我想加载选择和值应该被选择.当我在 select 中更改某些内容时,它应该会反映在列表中.当前 ModuleId 没有被填充到列表中,当我点击列表时它没有填充选择列表.
视图模型:
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);回归自我;};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 = 函数(){people.push(new Person(1, 'John', 'USA',1));people.push(new Person(2, 'Mike', 'UK',1));people.push(new Person(3, 'Dan', 'AUS',2));},选择人 = 函数(p){被选中的人(p);self.editModuleId(ko.utils.arrayFirst(self.modules(), function (data) {console.log("项目模块ID" + p.ModuleId());返回 data.Id() === p.ModuleId();}));};获取人();返回 {人:人,选定的人:选定的人,选择人:选择人};})();ko.applyBindings(vm);
查看:
<li data-bind="text:name, click:$parent.selectPerson"></li><li data-bind="text:$root.editModuleId,click:$parent.selectPerson"></li>
<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'"/>
Modules observable 数组包含没有 observables 的简单 js 对象,因此在访问其属性时您不需要放置 ()
.从 selectPerson
函数中的 data.Id 中删除它:
selectPerson = function(p){被选中的人(p);editModuleId(ko.utils.arrayFirst(modules(), function (data) {console.log("项目模块ID" + p.ModuleId());返回 data.Id === p.ModuleId();}));};
这是工作小提琴:http://jsfiddle.net/JUChh/3/>
我仔细查看了您的代码,发现 editModuleId
是多余的.您需要 selectedPerson
对象中的属性 - ModuleId
并且应该将下拉列表的值绑定到它.
这里是重构的小提琴:http://jsfiddle.net/JUChh/18/>
here`see my fiddle
http://jsfiddle.net/kirannandedkar/JUChh/2/
When i click on name it doesnt load up select list and gives errror that function is expected. Actually i want to load select and value should be selected . When i change something in select it should get reflected in the list. Currently ModuleId is not getting populated in list and when i click on list its not populating the select list.
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);
View:
<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>
Modules observable array contains simple js objects without observables so when accessing its properties you don't need to put ()
. Remove it from data.Id in selectPerson
function:
selectPerson = function(p){
selectedPerson(p);
editModuleId(ko.utils.arrayFirst(modules(), function (data) {
console.log("item module id " + p.ModuleId());
return data.Id === p.ModuleId();
}));
};
Here is working fiddle: http://jsfiddle.net/JUChh/3/
I look at your code closer and found that editModuleId
is redundant. You have needed property inside selectedPerson
object - ModuleId
and should bind value of dropdown to it.
Here is refactored fiddle: http://jsfiddle.net/JUChh/18/
这篇关于淘汰赛主细节不适用于选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!