Knockoutjs周期性阵列 [英] Knockoutjs Recurring Array

问题描述

我使用KnockoutJS创建一个TreeView风格的对象，需要能够有孩子文件夹和项目的x个。任何人做在屏幕上反复出现的数组，我通常使用的foreach，我可以把一个孩子在另一个但我无法弄清楚如何改变模板，使他们经常性，是它甚至可能吗？为了澄清我可以得到物品进入淘汰赛精细它只是让他们在屏幕上显示。

I am creating a treeview styled object using KnockoutJS and need to be able to have x number of children folders and items. Has anyone done a recurring array on screen, I usually use foreach and I can put one child within another but I can't figure out how to change the template to make them recurring, is it even possible? To clarify I can get the items into knockout fine it's simply getting them displayed on screen.

到处在互联网上，但只能找到嵌套的模板，而不是经常性的。谁能帮助？

Looked everywhere on the internet but can only find nested templates rather than recurring ones. Can anyone help?

推荐答案

让我演示一下如何使用模板实现这一目标。
让假设你有以下视图模型：

Let me demonstrate how you can achieve this using a template. Let suppose you have the following viewmodel:

var comments = [{
    id: 1,
    comment: 'How can i use knockoutjs?',
    childrenLength: 3,
    children: [{
        id: 2,
        comment: 'Please search before asking',
        childrenLength: 0,
        children: []
    }, {
        id: 3,
        comment: 'Please read the documentation',
        childrenLength: 0,
        children: []
    }, {
        id: 4,
        comment: 'You can see the blog posts on this',
        childrenLength: 2,
        children: [{
            id: 5,
            comment: 'Please search before asking',
            childrenLength: 0,
            children: []
        }, {
            id: 6,
            comment: 'Please search before asking',
            childrenLength: 0,
            children: []
        }]
    }]
}, {
    id: 7,
    comment: 'You question is not sufficient to be asked here?',
    childrenLength: 3,
    children: [{
        id: 8,
        comment: 'Please seach before asking',
        childrenLength: 0,
        children: []
    }, {
        id: 9,
        comment: 'Please read the documentation',
        childrenLength: 0,
        children: []
    }, {
        id: 10,
        comment: 'You can see the blog posts on this',
        childrenLength: 0,
        children: []
    }]
}]

var vm = function(){
    var self = this
    self.comments = ko.observableArray(comments)
}

$('document').ready(function () {
    ko.applyBindings(new vm())
})

您可以在这里看到的多分支。现在你可以用递归实现这一目标。

You can see here is multilevel branching. Now you can achieve this with recursion.

<div class="body" data-bind="foreach: comments">
    <div data-bind="template: { name: 'childTemplate', data: $data }"></div>
</div>

<script type="text/html" id="childTemplate">
    <span data-bind="text:comment"></span>
    <!-- ko if: $data.childrenLength > 0 -->
        <!-- ko foreach: children -->
            <div data-bind="template: { name: 'childTemplate', data: $data }" style="padding-left:35px;"></div>
        <!-- /ko -->
    <!-- /ko -->
</script>

小提琴演示

这篇关于Knockoutjs周期性阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！