Select2用字符串覆蓋敲除的ObservableArray

Question

我使用帶有自定義敲除綁定的select2來提供動態標簽支持。 不幸的是，當用戶修改select2控件時，綁定的可觀察數組將用逗號分隔的值字符串覆蓋，而不是簡單地將新值添加到可觀察數組。 我猜想這與綁定輸入值的方式有關，但是我似乎找不到其他方法。 任何幫助將不勝感激！

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 。 小提琴也已更新。

編輯：

我已經閱讀了一些有關select2插件及其標簽支持的信息。 據我了解，您已經將預定義的標簽集（在選項中設置）與用戶選擇的實際標簽混合在一起。 我已經顯着更新了jsfiddle ，現在綁定處理程序如下所示：

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

首先，為方便起見，我添加了默認值，因此，例如，您不必每次都指定令牌分隔符。 接下來，我將所有用於標簽選擇的管道移到了綁定處理程序，現在您的視圖模型如下所示：

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 }}"/>

因此，不再有字符串，所有操作都在綁定處理程序中完成。

原始答案：

只需使用另一個可觀察的值來保持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(','));
    });
};

我已將視圖模型聲明從對象更改為函數，因此編寫訂閱函數會更容易。

另外，您應該在自定義綁定中使用update功能以對列表更改做出反應。

我已經更新了您的jsfiddle以顯示其工作方式。 我添加了“ Add value按鈕，以了解如何與添加元素一起使用。 而且我使用了一個隨機數來添加新值，因為select2不喜歡我猜的相似值（將它們當作一個值進行處理）。