Knockout和JSTree无法正确呈现

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>

这是一个简化的例子.

更新:

如果要在每次<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>