Question

I’m trying to bind a 1-many mapping using KnockoutJS, where 1 zip code can have many ‘agents’. I have the following classes:

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);

My bindings look like this:

<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>

Everything binds fine the first time, with the table and select fields appearing properly. However, nothing happens when I change the selected value on any of the select elements. I have bound other elements to them and these don’t update, and I’ve tried using .subscribe() to listen for the update event, but this doesn’t fire either.

I expect there’s something wrong with the way I’m setting up/binding these relationships, but I can’t figure it out to save my life.

Thanks!

Answer 1

I think you need to add

self.agents = ko.observableArray([]); 

at the top of ZipcodeUsersViewModel