Question

我在我的页面上使用KnockoutJS并尝试为JsTree填充DOM，但是JsTree没有正确识别叶子并且对KnockoutJs填充的叶子（或文件夹）的代码应用任何更改。有没有办法告诉JsTree有新数据，应该重新评估一切？页面开头的脚本

$(document).ready(function() {

        function treeNode(data) {
            var self = this;
            self.id = ko.observable(data.ID);
            self.name = ko.observable(data.Name);
        }

        function partsViewModel() {
            var self = this;
            self.partTypes = ko.observableArray([]);
            self.selectedPartType = ko.observable();
            self.selectedPartType = ko.observable();

            $.getJSON("/PartKO/PartTypes", function(allData) {
                var mappedPartTypes = $.map(allData, function(item) { return new treeNode(item); });
                self.partTypes(mappedPartTypes);
            });

            $("#navigation").jstree({
                "themes": { "theme": "classic" },
                "plugins": ["themes", "html_data"]
            });
        }

        ko.applyBindings(new partsViewModel());

    });

HTML

ul id="navigation" class="treeview" data-bind="foreach: partTypes">
        <li>
            <a href="#" data-bind="text:name"></a>
        </li>
    </ul>

Answer 1

您需要在填充列表后调用.jstree，因此请将呼叫移至$.getJSON回调的结尾。

navigation也应该是一个包含<ul>元素而不是列表本身的容器。

将partsViewModel功能更改为：

function partsViewModel() {
    var self = this;
    self.partTypes = ko.observableArray([]);
    self.selectedPartType = ko.observable();
    self.selectedPartType = ko.observable();

    $.getJSON("/PartKO/PartTypes", function(allData) {
      var mappedPartTypes = $.map(allData, function(item) { return new treeNode(item); });
      self.partTypes(mappedPartTypes);

      $("#navigation").jstree({
        "themes": { "theme": "classic" },
        "plugins": ["themes", "html_data"]
      });
    });
}

你的HTML要：

<div id="navigation">
  <ul class="treeview" data-bind="foreach: partTypes">
    <li>
        <a href="#" data-bind="text:name"></a>
    </li>
  </ul>
</div>

HERE 是一个简化示例。

<强>更新

如果您想在每次更改<ul>时更新树，可以使用Knockout的.afterRender回调。这将在DOM更新后调用。您无法使用.subscribe()，因为在DOM更改之前会调用它。

将其插入partsViewModel并从.jstree回调中移除.getJSON部分：

    self.redrawTree = function() {
        $("#navigation").jstree({
            "themes": {
                "theme": "classic"
            },
            "plugins": ["themes", "html_data"]
        });
    };

并将HTML更改为：

<div id="navigation">
  <ul class="treeview" data-bind="foreach: { data: partTypes, afterRender: redrawTree }">
    <li>
      <a href="#" data-bind="text:name"></a>
    </li>
  </ul>
</div>

Knockout和JSTree无法正确呈现

1 个答案: