Question

我正在进行我的第一个Knockout项目，正在努力找出处理这种情况的最佳方法。

希望这个愚蠢的例子符合它的目的。

我正在尝试编辑一个“项目”对象，该对象具有“员工”的属性。

function Project(data) {
    var self = this;
    self.Name = data.Name;
    self.Employee = data.Employee;
}

function Employee(data) {
    var self = this;
    self.ID = data.ID;
    self.Name = data.Name;
}

我首先加载我的项目，然后设置'selectedEmployee'。

var me = new Employee ({ ID: 1, Name: 'Aaron'});

function vm() {
    var self = this;

    self.Project = ko.observable(new Project({ Name:'Knockout', Employee:me}));

    self.selectedEmployee = ko.observable(self.Project().Employee);

    self.employees = ko.observableArray([
                                        new Employee ({ID: 1,Name: 'Aaron'}),
                                        new Employee ({ID: 2,Name: 'George'}),
                                        new Employee ({ID: 3,Name: 'Ross'})
                                        ]);
}

ko.applyBindings(vm);

我有一个下拉列表，其中包含员工列表：

<select data-bind="options: employees, optionsText: 'Name',value: selectedEmployee, optionsCaption:'Pick Employee'"></select>

我的问题：下拉列表没有选择员工。我猜这是因为'selectedEmployee'对象和Project.Employee对象不一样。

此示例有效：

var me = new Employee ({ ID: 1, Name: 'Aaron'});

function vm() {
    var self = this;

    self.Project = ko.observable(new Project({ Name:'Knockout', Employee:me}));

    self.selectedEmployee = ko.observable(self.Project().Employee);

    self.employees = ko.observableArray([
                                        me,
                                        new Employee ({ID: 2,Name: 'George'}),
                                        new Employee ({ID: 3,Name: 'Ross'})
                                        ]);
}

ko.applyBindings(vm);

那么，让项目中的“员工”与下拉列表中的内容相匹配的最佳做法是什么？我加载时，是否需要从“员工”列表中检索Employee对象（基于ID）？

我尝试使用EmployeeName的observable属性（在显示值[只读]时使用）和EmployeeID（从列表中选择时使用），但不更新EmployeeName。

似乎应该有一个简单的方法来做到这一点，但就像我说的，这是我的第一个Knockout项目。

这是我的fiddle

提前谢谢。

Answer 1

好的，我将根据@nemesv的评论提供我想出的答案。

这是我的HTML。请注意我将options设置为一个对象数组。 {1}}和optionsText属性设置如您所料。我的自定义绑定optionsValue设置为我的视图模型中的选定对象。

selectById

这是我的观点模型：

<select data-bind="options: employees, 
            optionsText: 'Name',
            optionsValue: 'ID',                    
            selectById: selectedEmployee, 
            optionsCaption:'Pick Employee'">
</select>
<br><br>
Selected Employee:
<span data-bind="text: ko.toJSON(selectedEmployee)"></span>

我毫不怀疑这个解决方案可以改进，随时传递更好的解决方案/提示。坦率地说，我认为这种选择应该融入Knockout。

Knockout.js将SelectedOption设置为一个对象

1 个答案: