已解决;
<!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>
这句代码是ko.js的无容器绑定,看博主代码自多聪明给删除了,结果绑定错位置,所以一直不能正确输出;