jquery - KnockoutJS 自定义绑定(bind)以从多选中获取逗号分隔值

Question

我的 html 中有以下选择:

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

我正在尝试编写一个 knockout 自定义绑定(bind)，以便每当用户在多选下拉列表中选择多个城市时，用逗号分隔值更新可观察的 CityIds 。例如，如果我有以下选择:

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

并且用户选择前 3 个城市，那么我的可观察结果应该是 1,2,3。如果用户取消选择City 3，则可观察值应具有1,2，并且一旦用户选择/取消选择中的任何值，就会发生这种情况选择。

我使用 this 中的引用编写了以下自定义绑定(bind)问题:

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

在上面的自定义绑定(bind)中，当我更改多选下拉列表中的选择时，更新事件不会触发。我应该在自定义绑定(bind)中更改哪些内容才能满足我的要求？

Answer 1

我不太直接回答你的问题，其他人(甚至我)可能会在单独的答案中这样做。相反，让我提出一种替代方法来处理这个问题，恕我直言，这种方法更适合 Knockout 的 MVVM 风格。

构造您的 View 模型以保存您想要的 CSV 字符串 computed observable 。例如:

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(",");
    });
};

您可以使用此 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>

参见this fiddle进行演示。

与自定义绑定(bind)相比，此方法的优点包括:

• 可进行单元测试；
• 无需自定义绑定(bind)；
• Knockout 使 CSV 字符串与 View 保持同步，无需自定义代码；
• 不需要依赖 jQuery，如果可能的话，利用 KO 让你的 JS 不知道实际的 DOM(这再次提高了可测试性)；

<小时/>

如果您没有为 View 模型使用构造函数，而是使用普通的 javascript 对象，则必须在使用基本属性创建对象之后添加计算的可观察量。像这样的事情:

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(",");
});

或参见this modified fiddle .