带有标签和倍数的淘汰赛和动态 Selects2s

Question

我在让具有倍数的 JQuery Select2 和标签与 KnockoutJS 一起工作时遇到问题。

到目前为止，我使用传统的选择框 see this jsfiddle 可以正常工作。

使用带有单例选项的 Select2 时也可以正常工作，see this jsfiddle。

但是一旦我引入标签并多选整个瘦身分崩离析，see this jsfiddle

能否请您帮我在最后一个jsfiddle中正确绑定并打印出右侧的多个选定值？

这是最后一个例子的html代码：

<table data-bind="foreach: fLines">
  <tr>
    <td>
      <select style="width:150px;" multiple="true" class="js-example-basic-multiple" data-bind="options: $root.formatValues, value: type"></select>
    </td>
    <td>
      <a href="#" data-bind='click: function() { $root.fLines.remove($data); }'>Remove</a>
    </td>
    <td>
      Select value is: <span data-bind="text: type"></span>
    </td>
  </tr>
</table>
<button style="background-color: transparent; border: none;" data-bind="click: addfLine">Add Format</button>

和它的 JS：

$(document).ready(function() {
  $('.js-example-basic-multiple').select2({
    tags: true
  });
});

var Item = function(format) {
  var self = this;
  self.type = ko.observable(format);
  self.value1 = ko.observable();
};

var Formatters = {
  formatValues: ko.observableArray(["A", "B", "C"]),
  fLines: ko.observableArray([new Item("C")]),
  addfLine: function() {
    this.fLines.push(new Item("C"));
    $('.js-example-basic-single').select2({
      tags: true
    });
  },
  removefLline: function() {
    this.fLines.remove(ko.dataFor(this));
  }
};

ko.applyBindings(Formatters);

Answer 1

我不确定您对模板的意图是什么，所以我现在将绕过它。为了反映多个选定的值，您需要将绑定从“value”更改为“selectedOptions”。那么绑定目标需要是一个 observableArray，所以在这个例子中，我在 Item 上使用了一个名为 selectedTypes 的新属性来保存已选择的类型。

<select style="width:150px;" multiple="true" class="js-example-basic-single" 
    data-bind="options: $root.formatValues, selectedOptions: selectedTypes"></select>

//var formatValues = ["A", "B", "C"];
$(document).ready(function() {
  $('.js-example-basic-single').select2({
    tags: true,
    tokenSeparators: [','],
    placeholder: "Add your tags here"
  });
});

var Item = function(format) {
  var self = this;
  self.type = ko.observable(format);
  self.selectedTypes = ko.observableArray([]);
	self.value1 = ko.observable();
};

var Formatters = {
  formatValues: ko.observableArray(["A", "B", "C"]),
  fLines: ko.observableArray([new Item("C")]),
  addfLine: function() {
    this.fLines.push(new Item("C"));
  },
  removefLline: function() {
    this.fLines.remove(ko.dataFor(this));
  }
};

ko.applyBindings(Formatters);

td {
  border: 1px dotted blue;
  padding: 2px; 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<table data-bind="foreach: fLines">
  <tr>
    <td>
      <select style="width:150px;" multiple="true" class="js-example-basic-single" data-bind="options: $root.formatValues, selectedOptions: selectedTypes"></select>
    </td>
    <td data-bind="template: type"></td>
    <td>
      <a href="#" data-bind='click: function() { $root.fLines.remove($data); }'>Remove</a>
    </td>
    <td>
      --> value is: <span data-bind="text: ko.toJSON(selectedTypes)"></span>
    </td>
  </tr>
</table>
<button style="background-color: transparent; border: none;" data-bind="click: addfLine">Add Format</button>

<script id="A" type="text/html">
  <input data-bind="value: value1" />
</script>

<script id="B" type="text/html">
  <span>removes leading and trailing spaces</span>
</script>

<script id="C" type="text/html">
	Template C
</script>