Bindung Knockout funktioniert nicht mit Kendo multiselect

Question

Ich habe einen multiselect Element 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> 

ich den Wert nur in der Konsole sehen und nicht in der Spanne

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>

I edited the Kendo demo mehr wie Ihr Code und es zeigt [object Object] in der Spannweite.

<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> 

Das Problem kann auf die toString Umsetzung Ihrer value bezogen werden.