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>

然后我将使用以下命令构建jstree：

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

首次初始化时一切正常。之后，我们更新了knockout observable数组数据（KoObservableArray），我们需要刷新jstree以反映新数据。

我试过了：

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

但它们都不适合我。请帮助和建议:(

添加了代码示例以演示我的问题。 http://jsfiddle.net/mang/pyh9m7de/7/

点击changeMenu后，我希望Jstree将刷新以表示新数据。

Answer 1

使用重绘（true）

刷新只会回到初始状态。

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

如何更新knockout observable数组的值时刷新jstree？

2 个答案: