1
私はKnockoutJSを使用して1の数のマッピングをバインドしようとしています。ここで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>
すべてが表と選択フィールドが正しく表示されて、初めての微結合し、私は次のクラスがあります。ただし、select要素のいずれかで選択した値を変更すると、何も起こりません。私はそれらに他の要素をバインドしていますが、これらは更新されません、私は更新イベントを聞くために.subscribe()を使ってみましたが、これはどちらも起動しません。
私は、これらの関係を設定/バインドする方法に何か問題があると思っていますが、私の人生を救うためにそれを理解することはできません。
ありがとうございます!
ああがらくたの上部に
を追加する必要があると思います。間違ったコードをコピーしたので、私はUserの半分、Agentの半分を持っていました。申し訳ありません、私はすべてが正しいと思います。 – Joel
ここにjsfiddleの例があります:http://jsfiddle.net/jHBX3/上記の選択で値を変更すると、以下も変更されます。 – Geoff