KnockoutJS在模型上选择
问题描述:
我想使用KnockoutJS绑定一对多映射,其中1个邮政编码可以有许多'代理'。我有以下类:KnockoutJS在模型上选择
function CaseAssignmentZipCode(zipcode, agent) {
var self = this;
self.zipcode = ko.observable(zipcode);
self.agent = ko.observable(agent);
}
function Agent(id, name) {
var self = this;
self.id = id;
self.name = name;
}
function ZipcodeAgentsViewModel() {
var self = this;
self.caseAssignmentZipCodes = ko.observableArray([]);
self.agents = ko.observableArray([]);
jdata = $.parseJSON($('#Agents').val());
var mappedAgents = $.map(jdata, function (a) { return new Agent(a.Id, a.Name) });
self.agents(mappedAgents);
var dictAgents = {};
$.each(mappedAgents, function (index, element) {
dictAgents[element.id] = element;
});
var jdata = $.parseJSON($('#CaseAssignmentZipCodes').val());
var mappedZipcodeAgents = $.map(jdata, function (za) { return new CaseAssignmentZipCode(za.ZipCode, dictAgents[za.UserId], false) });
self.caseAssignmentZipCodes(mappedZipcodeAgents);
}
var vm = new ZipcodeAgentsViewModel()
ko.applyBindings(vm);
我的绑定是这样的:
<table>
<thead><tr><th>Zipcode Agents</th></tr></thead>
<tbody data-bind="foreach: caseAssignmentZipCodes">
<tr>
<td><input data-bind="value: zipcode"></td>
<td><select data-bind="options: $root.agents, value: agent, optionsText: 'name'"></select></td>
<td><a href="#" class="image-button small delete-small no-text" data-bind="click: $root.removeZipcode">Remove</a></td>
</tr>
</tbody>
</table>
一切结合精致的第一次,与该表选择字段显示正常。但是,当我更改任何选择元素上的选定值时,没有任何反应。我绑定了其他元素给他们,这些不会更新,我尝试使用.subscribe()来侦听更新事件,但是这也不会触发。
我希望我设置/绑定这些关系的方式有些问题,但我无法想象它能拯救我的生命。
谢谢!
答
我认为你需要在ZipcodeUsersViewModel
啊废话的顶部添加
,这是我不好。复制了错误的代码块,所以我有一半的用户和一半的代理。对不起,我认为现在一切正确。 – Joel 2012-02-07 19:50:56
以下是您在jsfiddle上的示例:http://jsfiddle.net/jHBX3/如果您在上面的选择中更改了值,它也会在下面更改。 – Geoff 2012-02-07 20:21:06