剔除可观察数组的值已更新时，如何刷新jstree？

Question

HTML code:

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

Then I will build the jstree with below command:

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

Everything works fine for first initialization. After that, we update knockout observable array data (KoObservableArray), and we need to refresh the jstree to reflect the new data.

I tried:

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

But none of them works for me. Please help and advices :(

Added code example to demo my problem. http://jsfiddle.net/mang/pyh9m7de/7/

After click on changeMenu, I expect the Jstree will be refresh to represent new data.

Answer 1

Use redraw(true)

refresh only goes back to initial state.

Answer 2

OKay I managed to solve this.

You have 2 alternatives:

1) Reset the data of your jstree

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

This method working in Chrome and Firefox, but not in my IE :(

2) ugly workarounds - working for me in all browser.

remove the jstree from HTML and re-add to the 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"]
    });