Question

我试图用knockout.js渲染一个嵌套列表，但我的问题是我不知道在交换对象之前我有多少级别的子对象。它可能是没有，一个或三百个级别的孙子。

这是我从列表中只有一个级别阅读时的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <ul data-bind="template: { name: 'friendTemplate', foreach: friends, as:  'friend' }"></ul>

        <!-- Template -->
        <script type="text/html" id="friendTemplate">
            <li>
                <strong data-bind="text: fullName"></strong>
                id: <span data-bind="text: id"></span>,
                parentId: <span data-bind="text: parentId"></span>
            </li>
        </script>

        <script type="application/javascript">
            function friend(id, parentId, firstName, lastName) {
                this.id = id;
                this.parentId = parentId;
                this.profilePicture = "";
                this.firstName = firstName;
                this.lastName = lastName;
                this.friends = ko.observableArray();

                this.fullName = ko.computed(function() {
                    return firstName + " " + lastName;
                });
            }

            function userViewModel(id) {
                this.id = id;
                this.profilePicture = "";
                this.firstName = ko.observable("Bert"); 
                this.lastName = ko.observable("Bertington");
                this.friends = ko.observableArray();

                this.fullName = ko.computed(function() {
                    return this.firstName + " " + this.lastName;
                });
                this.addFriend = function() {
                    this.friends.push(new friend(-1, this.id, 'John', 'Doe'));
                }.bind(this);
            }
            var user = new userViewModel(1);
            ko.applyBindings(user);

            var friend1 =  new friend(0, user.id, 'Patty', 'Smith');
            friend1.friends.push(new friend(0, user.id, 'Henry', 'Bellard'));

            user.friends.push(friend1);
            user.friends.push(new friend(1, user.id, 'George', 'Maddison'));
            user.friends.push(new friend(2, user.id, 'Takashi', 'Hendrixsson'));
            user.friends.push(new friend(3, user.id, 'Bella', 'Suffeur'));
        </script>
    </body>
</html>

如你所见，名单上的第一位朋友也有一位朋友，理论上这位朋友也可以有一位朋友。

那么，当我不知道雏鸟的水平时，我该如何渲染这些朋友呢？我是否必须使用JQuery或其他一些动态添加这些元素？

Answer 1

您将使用递归来解决此问题。您需要在使用相同模板的li中添加另一个ul：

<!-- Template -->
<script type="text/html" id="friendTemplate">
    <li>
        <strong data-bind="text: fullName"></strong>
        id: <span data-bind="text: id"></span>,
        parentId: <span data-bind="text: parentId"></span>
        <ul data-bind="template: { name: 'friendTemplate', foreach: friends, as:  'friend' }">       
        </ul>
    </li>
</script>

http://jsfiddle.net/Wk7dr/11/

当深度未知时，Knockout呈现嵌套列表

1 个答案: