淘汰表主要细节不适用于select [英] Knockout master detail not working with select

问题描述

here`see my fiddle

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

当我单击名称时，它不会加载选择列表，并给错误提供了预期的功能. 其实我想加载选择，应该选择值.当我在选择中更改某些内容时，它应该会反映在列表中.目前，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>

解决方案

模块可观察数组包含没有可观察对象的简单js对象，因此在访问其属性时无需放置().从selectPerson函数中的data.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中需要属性，并且应该将dropdown的值绑定到它.

这里是重构小提琴: 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/

这篇关于淘汰表主要细节不适用于select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！