绑定敲除不适用于 Kendo multiSelect

Question

我有一个 multiSelect 元素 HTML：

<li>
        <select id="doc" data-role="multiselect"
            data-placeholder="Choose...'"
            data-value-primitive="true"
            data-value-field="name"
            data-text-field="name"
            data-bind="value: sel, source: list"></select>
        <hr/>
        <span data-bind="text: sel"></span>
    </li>

我只在控制台中看到该值，而不是在跨度中

Answer 1

  function tab() {
    var tabs = "";

    for (var i = 0; i < stringify.level; i++) {
      tabs += "\t";
    }

    return tabs;
  }

function stringify(items) {
  var item,
    itemString,
    levelString = "";

  for (var i = 0; i < items.length; i++) {
    item = items[i];

    if (!item.items) {
      itemString = kendo.stringify(item);
    } else {
      stringify.level++;
      var subnodes = stringify(item.items);
      stringify.level--;

      delete item.items;

      itemString = kendo.stringify(item);

      itemString = itemString.substring(0, itemString.length - 1);

      itemString += ",\"items\":[\r\n" + subnodes + tab() + "]}";
    }

    levelString += tab() + itemString;

    if (i != items.length - 1) {
      levelString += ",";
    }

    levelString += "\r\n";
  }

  return levelString;
}

stringify.level = 1;

$(document).ready(function() {
  var Node = kendo.data.Node;
  var viewModel = kendo.observable({
    colors: [{
        name: "Red",
        value: "#f00"
      },
      {
        name: "Green",
        value: "#0f0"
      },
      {
        name: "Blue",
        value: "#00f"
      }
    ],
    multiSelectValue: [],
    displayMultiSelectValue: function() {
      var multiSelectValue = this.get("multiSelectValue");
      return kendo.stringify(multiSelectValue);
    }
  });

  kendo.bind($("div.demo-section"), viewModel);
});

<script src="//kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" rel="stylesheet" />
<div id="example">
  <div class="demo-section k-content wide">
    <h4>Current view model state</h4>
    <pre class="prettyprint">
{
    multiSelectValue: <span data-bind="text: displayMultiSelectValue"></span>
}
                </pre>
  </div>
  <div class="demo-section k-content wide">

    <ul class="fieldlist">
      <li>
        <h4>MultiSelect:</h4>
        <select data-role="multiselect" multiple="multiple" data-placeholder="choose..." data-value-primitive="true" data-value-field="name" data-text-field="name" data-bind="source: colors, value: multiSelectValue"></select>
      </li>
      <li data-bind="text: multiSelectValue"></li>
      <li>Should be above</li>
    </ul>
  </div>
</div>

我edited the Kendo demo 更像你的代码，它在跨度中显示[object Object]。

    <ul class="fieldlist">
      <li>
        <h4>MultiSelect:</h4>
        <select data-role="multiselect"
         multiple="multiple"
         data-placeholder="choose..."
         data-value-primitive="true"
         data-value-field="name"
         data-text-field="name"
         data-bind="source: colors, value: multiSelectValue"></select>
      </li>
      <li data-bind="text: multiSelectValue"></li>
      <li>Should be above</li>
    </ul>

此问题可能与您的value 的toString 转换有关。