我必须在许多页面中显示模板。我正在尝试使用淘汰赛。
我有一个index.html文件，内容如下：
<head>
<script data-main="js/main" src="js/libs/require/require.js"></script>
</head>
<body>
<header>
<div id='div1' data-bind="template: {name: 'testTemplate'}"></div>
</header>
</body>
testTemplate.html如下所示：
<div>
<button data-bind="click:function(data){$root.test(data)}">Test</button>
<!-- ko foreach: globalNavItems -->
<p> <a data-bind="text: label, attr:{href: url}"> <span class=""></span>
</a></p>
<!-- /ko -->
</div>
我希望在点击按钮Test时填充globalNavItems。我的main.js如下：
require(['knockout', 'jquery', 'text!../patterntemplates/testTemplate.html'],
function(ko, $, t0) {
function headerViewModel() {
var self=this;
self.globalNavItems =ko.observableArray([]);
self.test = function(data){
global_nav_dropdown_items =
ko.observableArray([{"label": "preferences","url":"Menu.html"},
{"label": "help","url": "#"},
{"label": "about","url": "#"},
{"label": "sign out","url": "#"}]);
self.globalNavItems=global_nav_dropdown_items;
}
}
oj.koStringTemplateEngine.install();
ko.templates["testTemplate"] = t0;
$(document).ready(function() {
ko.applyBindings(new headerViewModel(),
document.getElementById('div1'));
});
});
我可以在运行index.html时看到按钮。点击按钮时，方法测试也会被调用，但globalNavItems没有被填充，我在页面中看不到任何链接。
有指针吗？
感谢
这一行是有问题的一行：
self.globalNavItems=global_nav_dropdown_items;
通过运行此操作，您可以将定义的observableArray替换为一个普通的JavaScript数组，并且它不再绑定到页面。你需要通过它的接口更新可观察到的，而不仅仅是分配给变量：
self.globalNavItems(global_nav_dropdown_items);