剔除-如何订阅多个下拉菜单（选择）并绑定到模型

Question

SO lovers and javascript developers,

How can I bind multiple dropdowns to a model and subscripe its' change events individually for each dropdown?

I have a basic form for that.. You can see it live in jsFiddle: http://jsfiddle.net/2Mnr3/7/
Why all select fields changes together when I select one? How can I do it in individually way?

Here it's my HTML:

<div class='liveExample'> 

<h2>Orders</h2>
<div id='contactsList'>
    <table class='contactsEditor'>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Service</th>
        </tr>
        <tbody data-bind="foreach: contacts">
            <tr>
                <td>
                    <input data-bind='value: firstName' />
                    <div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div>
                </td>
                <td><input data-bind='value: lastName' /></td>
                <td>
                    <table>
                        <tbody data-bind="foreach: services">
                            <tr>

                                <td>

                                    <select data-bind='options: catalog, value: $root.selectedId, optionsText: "name", optionsCaption: "Select..."'> </select>
                                </td>

                                <td>
                                    <div data-bind="visible: $root.selectedId()">
                                        <span data-bind='text: $root.selectedId.price'> </span>
                                        <!--<span data-bind='text: "asd"'> </span>-->
                                    </div>
                                <td>

                                <a href='#' data-bind='click: $root.removeService'>Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addService'>Add service</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<p>
    <button data-bind='click: addContact'>Add customer </button>
    <button data-bind='click: save, enable: contacts().length > 0'>JSON</button>
</p>

<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled
          ='disabled'> </textarea>

And Javascript Code with Knockout library:

function formatCurrency(value) {
    console.log(value);
    return value;
}

var serviceTypes = [
        { name: "Service One", id: "1", price: "10 USD"},
        { name: "Service Two", id: "2", price: "9 USD"},
        { name: "Service Three", id: "3", price: "25 USD"},
        { name: "Service Four", id: "4", price: "42 USD"}
      ];

var initialData = [
{ firstName: "John", lastName: "Carter", services: [{ catalog: serviceTypes, id: 0 }, { catalog: serviceTypes, id: 2 }]
}
];

   function ContactsModel(contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
        return { id: contact.id, firstName: contact.firstName, lastName: contact.lastName, services: ko.observableArray(contact.services) };
    }));


self.serviceTypes = ko.observableArray(serviceTypes);
self.selectedId = ko.observable('1');

self.selectedId.subscribe(function(item){
    return ko.utils.arrayFirst(serviceTypes, function(service) {
        return service;
    });
});

self.addContact = function() {
    self.contacts.push({
        firstName: "",
        lastName: "",
        services: ko.observableArray([
            {
                catalog: this.serviceTypes,
            }])
    });
};

self.removeContact = function(contact) {
    self.contacts.remove(contact);
};


self.addService = function(contact) {
    contact.services.push({
        catalog: self.serviceTypes,
    });
};

self.removeService = function(phone) {
    $.each(self.contacts(), function() { this.services.remove(phone) })
};

self.save = function() {
    self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
};

self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new ContactsModel(initialData));

Answer 1

You are sharing same observable($root.selectedId) instead of this every catalog should have there own copy of selectedId. for that you can use constructor function eg,

function Catalog(serviceTypes, d) {
   this.catalog = serviceTypes;
   this.selectedId = ko.observable(d || null);
   this.selectedId.subscribe(function (item) {
     //Subscriber Handler
   });
}
var initialData = [{
  firstName: "John",
  lastName: "Carter",
  services: [new Catalog(serviceTypes, 1), new Catalog(serviceTypes, 2)]
}];

addContact and addService function are also changed.

 self.addContact = function () {
    self.contacts.push({
        firstName: "",
        lastName: "",
        services: ko.observableArray([new Catalog(serviceTypes)])
    });
 };

 self.addService = function (contact) {
    contact.services.push(new Catalog(serviceTypes));
 };

Fiddle Demo

Answer 2

You are binding all your services select elements to the same $root.selectedId value.That's why the corresponding subscribe is being fired upon any change in any of them.

You need to bind the value dynamically based on the contact record for example.