javascript - Select2 用字符串覆盖 knockout observableArray

Question

我使用带有自定义 knockout 绑定(bind)的 select2 来提供动态标记支持。不幸的是，当用户修改 select2 控件时，绑定(bind)的可观察数组将被逗号分隔值字符串覆盖，而不是简单地将新值添加到可观察数组。我猜这与我绑定(bind)输入值的方式有关，但我似乎找不到替代方法。任何帮助将不胜感激!

JSFiddle:http://jsfiddle.net/gk8a6sht/6/

JavaScript:

ko.bindingHandlers.select2 = {
  init: function(element, valueAccessor) {
     var options = ko.toJS(valueAccessor()) || {};
     setTimeout(function() { 
         $(element).select2(options);
     }, 0);
   }
};    

var viewModel = {
    values: ko.observableArray(["red", "grey", "blue"])
};

ko.applyBindings(viewModel);

HTML:

<input data-bind="value: values, select2: { tags: values, tokenSeparators: [',', ' '] }"/>

Answer 1

编辑 2:

更正了下面代码中的 split 函数以使用指定的 tokenSeparators。 Fiddle也更新了。

编辑:

我已经阅读了一些关于 select2 的内容插件及其标记支持。据我了解，您将预定义的标签集(在选项中设置)与用户选择的实际标签混合在一起。我已经显着更新了我的 jsfiddle ，现在绑定(bind)处理程序如下所示:

ko.bindingHandlers.select2 = {
    defaults: {
        value: ko.observable(),
        select2Options: {
            tags: ko.observableArray([]),
            tokenSeparators: [',', ' ']
        }
    },
    init: function(element, valueAccessor) {
        var bindingOptions = valueAccessor() || {},
            options =  $.extend(true, {},
                ko.bindingHandlers.select2.defaults,          
                bindingOptions),
            value = ko.utils.unwrapObservable(options.value);
        $(element).val(value);
        $(element).select2(ko.toJS(options.select2Options));
        $(element).change(function() {
            options.value($(element).val().split(options.select2Options.tokenSeparators));
        });
    },
    update: function(element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor());
        $(element).val(valueAccessor().value());
    }
};

首先，为了方便起见，我添加了默认值，例如，您不必每次都指定标记分隔符。接下来，我将所有用于标记选择的管道移动到绑定(bind)处理程序，现在您的 View 模型如下所示:

function ViewModel () {
    var self = this;
    self.predefinedValues= ko.observableArray();
    self.selectedValues = ko.observableArray();
};
ViewModel.prototype.init = function() {
    // Here we should init our model with values from server, for example
    this.predefinedValues(["red", "grey", "blue"]);
    this.selectedValues(["red"]);
}

现在您有 2 个可观察数组 - 第一个是预定义的标签集，第二个是所选标签的实际数组。

标记如下所示:

<input type="hidden" style="width: 300px" data-bind="select2: { value: selectedValues, select2Options: { tags: predefinedValues }}"/>

所以不再有字符串，一切都在绑定(bind)处理程序中完成。

原答案:

只需使用另一个可观察对象来保留 select2 字符串的值，如下所示:

HTML:

<input data-bind="value: selectedValuesString, select2: { tags: values, tokenSeparators: [',', ' '] }"/>

Javascipt:

function ViewModel () {
    var self = this;
    self.values= ko.observableArray(["red", "grey", "blue"]);
    self.selectedValuesString= ko.observable(self.values().join(","));
    self.selectedValuesString.subscribe(function(newValue) {
        self.values(newValue.split(','));
    });
};

我已将 View 模型声明从对象更改为函数，因此编写订阅函数会更容易。

您还应该在自定义绑定(bind)中使用 update 函数来响应列表更改。

我已经更新了你的 jsfiddle展示它是如何工作的。我添加了 Add value 按钮以查看它如何处理添加元素。而且我使用了一个随机数来添加新值，因为我猜 select2 不喜欢相似的值(将它们视为一个值)。