任何人都可以告诉我如何根据从ajax调用传回的对象预先从下拉列表中选择一个值。我一直在阅读淘汰教程,并且自己一直在尝试一些事情。它永远不会根据员工的职位对象在下拉列表中选择正确的值。下面是我的代码,这里是我小提琴的链接
http://jsfiddle.net/ricobano/HcRVH/1/
<div data-bind="foreach: employees">
<div>
<label>Full Name</label>
<input data-bind="value: fullName" />
<label>Position</label>
<select id="slTest" data-bind="options: $root.Positions, value:position, optionsText:'name'"></select>
<label>Salary:</label><span data-bind="text: position().salary"></span>
</div>
</div>
function Employee(fullname, position) {
var self = this;
self.fullName = ko.observable(fullname);
self.position = ko.observable(position);
}
function Position(id, name, salary) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
self.salary = ko.observable(salary);
}
function EmployeeVM() {
var self = this;
self.employees = ko.observableArray();
self.Positions = [
new Position(1, "No position", "0"),
new Position(3, "Web Developer", "15100"),
new Position(2, "Manager", "30000")];
var data = {
json: $.toJSON([{
"fullName": "Richard Banks",
"position": {
"id": 2,
"name": "Manager",
"salary": "30000"
}
}, {
"fullName": "Dave Grohl",
"position": {
"id": 3,
"name": "Web Developer",
"salary": "15100"
}
}, {
"fullName": "bobby rahul",
"position": {
"id": 3,
"name": "Web Developer",
"salary": "15100"
}
}])
};
$.ajax({
url: "/echo/json/",
data: data,
type: "POST",
success: function (response) {
$.each(response, function (i, item) {
var e = new Employee(item.fullName, new Position(item.position.id, item.position.name, item.position.salary));
self.employees.push(e);
});
//alert($("#slTest").html());
}
});
}
ko.applyBindings(new EmployeeVM());
答案 0 :(得分:0)
默认情况下,淘汰赛options
绑定适用于对象,这就是您使用它的方式。问题是positions
数组与position
具有不同的employee
对象,即使它们是相同的值,因为您正在制作新的position
每个员工的对象。
您将不得不选择如何存储位置。
您可以使用optionsValue
绑定来映射员工职位的id
,this fiddle does
<select id="slTest" data-bind="options: $root.Positions, value:position, optionsText:'name', optionsValue: 'id'"></select>
---
$.each(response, function (i, item) {
var e = new Employee(item.fullName, item.position.id);
self.employees.push(e);
});
或者,您必须在position
循环中按id
查找each
,然后将其传递给员工,this fiddle
$.each(response, function (i, item) {
var position = ko.utils.arrayFirst(self.Positions, function(p) {
return p.id() == item.position.id;
});
var e = new Employee(item.fullName, position);
self.employees.push(e);
});