KnockoutJS自定义绑定以从多选中获取逗号分隔的值

Question

I am having the following select in my html:

<select class="form-control" data-bind="multiSelectCommaSeparated: CityIds, options: $root.Cities, optionsText: 'CityName', optionsValue: 'CityId', valueUpdate: 'change'" multiple="true"></select>

I am trying to write a knockout custom binding to update the CityIds observable with comma separated values whenever user selects multiple cities in the multi select drop down. For example if I have the following select :

<select id="cities" multiple="multiple">
    <option value="1">City 1</option>
    <option value="2">City 2</option>
    <option value="3">City 3</option>
    <option value="4">City 4</option>
</select>

and the user selects first 3 cities, then my observable should have 1,2,3 . If the user de-selects City 3 , then the observable should have 1,2 and this should happen as soon soon as the user selects/de-selects any value in the select .

I have written the following custom binding by using reference from this question:

ko.bindingHandlers.multiSelectCommaSeparated = {
    init: function (element, valueAccessor) {
        var selMulti = $.map($(element.id + " option:selected"), function (el, i) {
            return $(el).text();
        });
        valueAccessor(selMulti);
    },
    update: function (element, valueAccessor) {
        var selMulti = $.map($(element.id + " option:selected"), function (el, i) {
            return $(el).text();
        });
        valueAccessor(selMulti);
    }
}

In the above custom binding, the update event is not firing when I change my selection in the multi select dropdown . What should I change in the custom binding to achieve my requirement?

Answer 1

I'm not quite straight up answering your question, someone else (or even I) may do so in a separate answer. Instead, let me propose an alternative way to handle this, which is IMHO better suited to Knockout's MVVM style.

Construct your view model to hold the CSV string you want as a computed observable . For example:

var ViewModel = function() {
    var self = this;

    self.Cities = [
        {CityId: 1, CityName: "City 1"},
        {CityId: 2, CityName: "City 2"},
        {CityId: 3, CityName: "City 3"},
        {CityId: 4, CityName: "City 4"}
    ];

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

    self.SelectedCitiesCsv = ko.computed(function(){
        return self.SelectedCities().join(",");
    });
};

You can test this with this View:

<select class="form-control" 
        data-bind="selectedOptions: SelectedCities,
                   options: $root.Cities, 
                   optionsText: 'CityName',
                   optionsValue: 'CityId',
                   valueUpdate: 'change'"
        multiple="true"></select>

<hr />

CSV: <p data-bind="text: SelectedCitiesCsv"></p>

See this fiddle for a demo.

The advantages of this approach over a custom binding include:

• Unit testable;
• No custom bindings needed;
• Knockout keeps our CSV string in synch with the View, no custom code needed;
• No dependency on jQuery needed, if possible leverage KO to keep your JS ignorant of the actual DOM (which again improves testability);

---

In the case where you're not using constructor functions for your viewmodels, but plain javascript objects, you have to add computed observables after creating the object with the base properties. Something like this:

var viewModel =  {
    Cities :[
        {CityId: 1, CityName: "City 1"},
        {CityId: 2, CityName: "City 2"},
        {CityId: 3, CityName: "City 3"},
        {CityId: 4, CityName: "City 4"}
    ],

    SelectedCities : ko.observableArray([])
};

viewModel.SelectedCitiesCsv = ko.computed(function(){
    return viewModel.SelectedCities().join(",");
});

Or see this modified fiddle .