當knockout observable數組的值更新時如何刷新jstree？

Question

HTML代碼：

<div id="jstree_1"> 
<ul data-bind="foreach: KoObservableArray"> 
    <li data-bind="attr: {type: type}"> 
     <a href="#" data-bind="text: text"></a> 
     <ul data-bind="foreach: children"> 
      <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}' data-bind="attr: {id: id, type: type}"> 
       <a href="#" data-bind="text: text"></a> 
      </li> 
     </ul> 
    </li> 
</ul> 

然後我將建立jstree下面的命令：

$('#jstree_1').jstree({ 
'plugins': ["wholerow", "checkbox"]}); 

一切工作正常進行一次初始化。 之後，我們更新基元可觀測陣列數據（KoObservableArray），我們需要刷新jstree以反映新數據。

我想：

$('#jstree_1').jstree(true).refresh(); 
$('#jstree_1').jstree("refresh"); 

但他們沒有爲我工作。請幫助和建議:(

添加的代碼示例演示了我的問題。 http://jsfiddle.net/mang/pyh9m7de/7/

點擊changeMenu後，我預計Jstree將刷新表示新數據。

Answer 1

使用重繪（真）

刷新只追溯到初始狀態。

Answer 2

好吧，我設法解決這個問題。

你有2種選擇：

1）重置您的jstree的數據

$('#jstree_1').jstree(true).settings.core.data = self.KoObservableArray(); 
$('#jstree_1').jstree(true).refresh(); 

這種方法在Chrome和Firefox的工作，但不是在我的IE :(

2）醜陋的解決方法 - 在所有瀏覽器中爲我工作。

從HTML刪除jstree並重新添加到DOM

var elem = document.getElementById('jstree_1'); 
    elem.parentNode.removeChild(elem); 

    var newElement = $("<div id='jstree_1'><ul data-bind='foreach: KoObservableArray'><li data-bind='attr: {type: type}'><a href='#' data-bind='text: text'></a><ul data-bind='foreach: children'><li data-jstree='{'icon':'glyphicon glyphicon-leaf'}' data-bind='attr: {id: id, type: type}'><a href='#' data-bind='text: text'></a></li></ul></li></ul></div>").appendTo("#jstree_parent"); 
    ko.applyBindings(viewmodel, document.getElementById("jstree_1")); 

    $('#jstree_1').jstree({ 
     'plugins': ["wholerow", "checkbox"] 
    });