是否可以像这样在 KnockoutJS 中使用外部模板？
<script type="text/html" id="a_template" src="templates/a_template.html">
</script>
我已经尝试过这个解决方案，但没有成功。
【问题讨论】：
标签： templates knockout.js external knockout-templating
您可以使用jquery将html动态加载到脚本元素中，然后在此基础上执行敲除。
<script type="text/html" id="template_holder"></script>
<script type="text/javascript">
$('#template_holder').load('templates/a_template.html', function() {
alert('Load was performed.');
//knockout binding goes here
});</script>
您的淘汰绑定必须在回调函数中完成，否则您可能会在页面加载之前尝试绑定
更新这是我在 jsfiddle 上编写的一个示例，用于演示动态加载：http://jsfiddle.net/soniiic/2HxPp/
【讨论】：
【讨论】：
您也可以使用此模板引导程序进行 KO
引导程序 https://github.com/AndersMalmgren/Knockout.Bootstrap
MVC WebAPI 演示 https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo
使用这个库，它使用约定而不是配置方法 https://github.com/AndersMalmgren/Knockout.BindingConventions
意思是它会自动理解 MyViewModel 应该匹配到 MyView
它也可以在 SPA 中很好地工作
免责声明：我是上述 3 个库的作者
【讨论】：
这里有一个基于 soniic 回答的小函数：
function loadExternalKnockoutTemplates(callback) {
var sel = 'script[src][type="text/html"]:not([loaded])';
$toload = $(sel);
function oncomplete() {
this.attr('loaded', true);
var $not_loaded = $(sel);
if(!$not_loaded.length) {
callback();
}
}
_.each($toload, function(elem) {
var $elem = $(elem);
$elem.load($elem.attr('src'), _.bind(oncomplete, $elem));
});
}
这将自动加载您文档上的所有剔除模板，前提是它们的 src 已设置并且它们的类型是“text/html”。传入一个回调以在所有模板加载时得到通知。不知道如果其中任何一个失败会发生什么。
示例用法：
<head>
<script type="text/html" src="kot/template1.html" id="template1"></script>
</head>
<body>
<script>
$(function() {
loadExternalKnockoutTemplates(function() {
// Put your ready code here, like
ko.applyBindings();
});
});
function loadExternalKnockoutTemplates(callback) {
var sel = 'script[src][type="text/html"]:not([loaded])';
$toload = $(sel);
function oncomplete() {
this.attr('loaded', true);
var $not_loaded = $(sel);
if(!$not_loaded.length) {
callback();
}
}
_.each($toload, function(elem) {
var $elem = $(elem);
$elem.load($elem.attr('src'), _.bind(oncomplete, $elem));
});
}
</script>
</body>
【讨论】：