Javascript 模板未按预期工作的敲除嵌套foreach
我曾尝试使用JSFIDLE,但它抱怨模板脚本,但下面是一个完整的示例,您可以将其放入.html文件并在本地查看Javascript 模板未按预期工作的敲除嵌套foreach,javascript,jquery,knockout.js,jquery-templates,Javascript,Jquery,Knockout.js,Jquery Templates,我曾尝试使用JSFIDLE,但它抱怨模板脚本,但下面是一个完整的示例,您可以将其放入.html文件并在本地查看 <html> <head> <title>Test</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="t
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script type="text/javascript">
var InnerModel = function() {
this.name = ko.observable("");
}
var OuterModel = function() {
this.name = ko.observable("");
this.innerItems = ko.observableArray();
}
var ViewModel = function() {
this.name = ko.observable("");
this.outerItems = ko.observableArray();
}
$(document).ready(function() {
var model = new ViewModel();
ko.applyBindings(model)
model.name("ModelName");
outerItem = new OuterModel();
outerItem.name("Outer 1 Name");
model.outerItems.push(outerItem);
innerItem = new InnerModel();
innerItem.name("Inner 1 Name");
outerItem.innerItems.push(innerItem);
});
</script>
</head>
<body>
<script type="text/html" id="inner-template">
<li><span data-bind="text: inner.name"> </span></li>
</script>
<h3>Model Name: <span data-bind="text: name"></span></h3>
<div data-bind="foreach: outerItems" >
<h4><b>Outer:</b> <span data-bind="text: name"></span></h4>
<ul databind="template: { name: 'inner-template', foreach: innerItems, as: 'inner' }" ></ul>
</div>
</body>
</html>
但是输出中缺少-Inner 1 Name
片段
我做错了什么?databind=“template[…]”应该是数据绑定;) 不,我没有收到任何错误。很容易被忽略,事实上,我在发现之前还必须运行它。:)我完全在JSFIDLE中重新编写了大部分内容,但仍然没有理解它我其实是来删除这个问题的,因为我自己才发现。。。
Model Name: ModelName
Outer: Outer 1 Name
- Inner 1 Name