Question

我正在尝试使用此jsfiddle递归模板，但我仍处于动态数据呈现状态。我的数据如下：

[Object
    Children:    Array[2]
    EventCategory: Object
]

到目前为止，根据jsfiddle示例我有这个模板，但是如何检查数组是否有子？

    <script id="categoryTemplate" type="text/html">
        //How to check if data has child and display the child to its parent?
        <li>
            <span data-bind="text: name"></span>
            <ul data-bind="template: { name: 'categoryTemplate', foreach: children }"></ul>
        </li>
    </script>

Html渲染：

<ul data-bind="template: {name: 'categoryTemplate', foreach: $data.categoryRoot}"></ul>

Knockout绑定，如何渲染数组？

var categoryElement = function (name, children) {
    var self = this;
    self.children = ko.observableArray(children);
    self.name = ko.observable(name);
}

var categoryModel = {
    categoryRoot: ko.observableArray()
};

var viewModel = function () {
    var me = this;
    me.categoryRoot = ko.observableArray();

        me.selectCategory = function () {
            $.get('link-to-get-categories').then(function(response) {
                var categoryData = [
                //new categoryElement("Russia", [
                //    new categoryElement("Moscow")
                //]),
                new categoryElement(response.Data)

                //me.categoryRoot(categoryData);
                me.categoryRoot(response.Data);
            });
        }
}

ko.cleanNode($('#addEvent')[0]);
ko.applyBindingsWithValidation(new viewModel(), $('#addEvent')[0]);

Answer 1

概念错误：您的树根本身不是一个列表。它是一个单一的树元素。换句话说，不要将数组用于树根。

我还要翻转树木建筑模板，使其完全独立。

除此之外，knockout的虚拟元素和if绑定可以对条件渲染进行排序。

var TreeElement = function(name, children) {
    var self = this;
    self.children = ko.observableArray(children);
    self.name = ko.observable(name);
};

var viewModel = {
    treeRoot: new TreeElement(null, [
        new TreeElement("Russia", [
            new TreeElement("Moscow")
        ]),
        new TreeElement("Germany"),
        new TreeElement("United States", [
            new TreeElement("Atlanta"),
            new TreeElement("New York", [
                new TreeElement("Harlem"),
                new TreeElement("Central Park")
            ])
        ]),
        new TreeElement("Canada", [
            new TreeElement("Toronto")
        ])
    ])
};

ko.applyBindings(viewModel);

.tree {
    border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script id="tree" type="text/html">
    <!-- ko if: children().length -->
    <ul class="tree" data-bind="foreach: children">
        <li>
            <span data-bind="text: name"></span>
            <!-- ko template: 'tree' --><!-- /ko -->
        </li>
    </ul>
    <!-- /ko -->
</script>

<div data-bind="template: {name: 'tree', data: treeRoot}"></div>

Answer 2

如何检查数组是否有子节点？

您可以像这样检查数据绑定中的子项：

Option Explicit

Sub Test()

    Dim objCache As SlicerCache
    Dim objItem As SlicerItem
    Dim varChoices As Variant
    Dim lngCounter1 As Long
    Dim lngCounter2 As Long

    Set objCache = ThisWorkbook.SlicerCaches("Slicer_Company")
    varChoices = Array("1", "3", "5")

    ' iterate slicers
    For lngCounter1 = 1 To objCache.SlicerItems.Count
        Set objItem = objCache.SlicerItems(lngCounter1)
        'assume not for selection
        objItem.Selected = False
        'iterate choices to check for activation
        For lngCounter2 = 0 To UBound(varChoices)
            If objItem.Name = varChoices(lngCounter2) Then
                'activate and exit loop
                objItem.Selected = True
                Exit For
            End If
        Next lngCounter2
    Next lngCounter1

End Sub

通过在viewmodel中创建一个computed来简化数据绑定：

<-- ko if: children().length -->
<ul></ul>
<-- /ko -->

Answer 3

＆＃13;

<-- ko if: children && children().length -->
<ul></ul>
<-- /ko --> Safe check

＆＃13;

Knockout中的递归数组

3 个答案: