Javascript 如何在Fuel UX树| jQuery中重新加载数据

我使用框架加载树视图数据

在第一次加载文档时，树视图正确呈现，但当我尝试用新的

数据源重新加载树时，我什么也得不到

下面是我的代码示例：

树UI的模板：

<div id="MyTree" class="tree tree-plus-minus tree-no-line tree-unselectable">
    <div class="tree-folder" style="display:none;">
        <div class="tree-folder-header">
            <i class="fa fa-folder"></i>
            <div class="tree-folder-name">
            </div>
        </div>
        <div class="tree-folder-content">
        </div>
        <div class="tree-loader" style="display:none">
        </div>
    </div>
    <div class="tree-item" style="display:none;">
        <i class="tree-dot"></i>
        <div class="tree-item-name">
        </div>
    </div>
</div>

var UITree = function () {

    return {
        //main function to initiate the module
        init: function (el, data) {
            if (typeof el != 'undefined' && typeof data == 'object') {

                var DataSourceTree = function (options) {
                    this._data  = options.data;
                    this._delay = options.delay;
                };

                DataSourceTree.prototype = {
                    data: function (options, callback) {
                        var self = this;
                        var data = $.extend(true, [], self._data);
                        callback({ data: data });
                    }
                };

                var treeDataSource = new DataSourceTree(data);  


                $(el).tree({
                    selectable: false,
                    dataSource: treeDataSource,
                    loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
                });
            }
        }
    };

}();

//my data from ajax result
var myData = {
  "data": [
    {
      "name": "some_name",
      "type": "item"
    },
    {
      "name": "some_name_2",
      "type": "item"
    }
  ]
};


// call tree init to render data
UITree.init($('#MyTree'), myData);

该函数工作正常，只在第一次加载页面时呈现树，而不是在下一次Ajax调用时呈现树。
最终我找到了解决方案。也许这不是最佳实践，但这是我发现的唯一方法：

当元素已经分配了数据属性时，
Fuelux树UI
似乎不起作用，所以我做了如下操作：

// 1. Clear MyTree wrapper template with: 
$('#MyTree .tree-item:visible').remove();

// 2. remove assigned data from template element object
delete($('#MyTree').data().tree);

// 3. Refactor Tree UI
$('#MyTree').tree({
    selectable: false,
    dataSource: {
        data: function(options, callback) {
            callback(MyData);
        }
    }
});

我搜索了整个互联网，重新阅读了
Fuelux
文档，但没有提到重新分解
树UI
，所以如果有人遇到同样的问题，这个解决方案会有所帮助
 我终于找到了解决办法。也许这不是最佳实践，但这是我发现的唯一方法：

当元素已经分配了数据属性时，
Fuelux树UI
似乎不起作用，所以我做了如下操作：

// 1. Clear MyTree wrapper template with: 
$('#MyTree .tree-item:visible').remove();

// 2. remove assigned data from template element object
delete($('#MyTree').data().tree);

// 3. Refactor Tree UI
$('#MyTree').tree({
    selectable: false,
    dataSource: {
        data: function(options, callback) {
            callback(MyData);
        }
    }
});

我搜索了整个互联网，重新阅读了
Fuelux
文档，但没有提到重新分解
树UI
，所以如果有人遇到同样的问题，这个解决方案会有所帮助