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

Question

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

到目前为止，我已经在传统的 Select 盒子 see this jsfiddle.

上正常工作了

将 Select2 与单例选项一起使用时也可以正常工作，see this jsfiddle。

但是一旦我引入标签和 multi-select 整个薄片就会分崩离析，see this jsfiddle

你能帮我在最后 jsfiddle 正确绑定它并打印出右边的多个 selected 值吗？

这里是最后一个例子的 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>

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

Knockouts and dynamic Selects2s with tags and multiples

knockout.js

jquery-select2

knockout-3.0