当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"] 
    });