knockoutjs(ko.js) 模板循环输出变量

已解决;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
</head>
<body>
<style>
    th, td {
        padding: 10px;
        border: 1px solid gray;
    }
</style>
<script type="text/html" id="person">
    <tr>
        <td data-bind="text: $root.name"></td>
        <td data-bind="text: $parent.name"></td>
        <td data-bind="text: $data.name"></td>
    </tr>
    <!-- ko template: { name: 'person', foreach: children } --><!-- /ko -->
</script>

<table >
    <tr >
        <th>$root</th>
        <th>$parent</th>
        <th>$data</th>
    </tr>
    <!-- ko template: { name: 'person', data: mainPerson } --><!-- /ko -->
</table>
<script type="text/javascript">
    var Person = function (name) {
        var self = this;
        self.name = ko.observable(name);
        self.children = ko.observableArray([]);
    }

    var ViewModel = function () {
        var self = this;
        self.name = 'root view model';
        self.mainPerson = ko.observable();
    }

    var vm;
    vm= new ViewModel(),
            grandpa = new Person('grandpa'),
            daddy = new Person('daddy'),
            son1 = new Person('marc'),
            son2 = new Person('john');

    vm.mainPerson(grandpa);
    grandpa.children.push(daddy);
    daddy.children.push(son1);
    daddy.children.push(son2);
    ko.applyBindings(vm);

</script>
</body>
</html>
阅读 3.4k
1 个回答
 <!-- ko template: { name: 'person', foreach: children } --><!-- /ko -->

这句代码是ko.js的无容器绑定,看博主代码自多聪明给删除了,结果绑定错位置,所以一直不能正确输出;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题