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

Posted 2023-05-07

【中文标题】带有标签和倍数的淘汰赛和动态 Selects2s

【英文标题】：Knockouts and dynamic Selects2s with tags and multiples

【发布时间】：2018-04-15 13:42:39

【问题描述】：

我在让具有倍数的 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);

【问题讨论】：

模板如何适应？您是否尝试通过选择交换每行使用的模板？如果是这样，如果您选择了多个模板，它应该是什么样子？

【参考方案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>

【讨论】：

谢谢！！这正是我想要的。这些模板完全不相关，并且是从我试图摆弄的其他人的 jsfiddle 复制过来的，无论如何我现在已经更新了我的 jsfiddle.net/zi77/sb9hp96j，其中包含您的代码更改以及“用于 Knockout 的 Select2 v4 绑定处理程序”（github.com/cruikshj /knockout-select2) 用于标签支持和动态渲染！