Question

我在使用带有多个和标签的JQuery Select2与KnockoutJS一起工作时遇到问题。

到目前为止，我使用传统的选择框see this jsfiddle正确使用了它。

使用带有单例选项{4}的Select2时也能正常工作。

但是，只要我引入标签并多选，整个薄片就会崩溃，see this jsfiddle

你可以帮助我在最后see this 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

我不确定你对模板的意图是什么，所以我现在要绕过它。为了反映多个选定的值，您需要将绑定从“值”更改为“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>

敲击和动态选择具有标签和倍数的2

1 个答案: