15

是否可以像这样在 KnockoutJS 中使用外部模板？

<script type="text/html" id="a_template" src="templates/a_template.html">
</script>

我已经尝试过这个解决方案，但没有得到它的工作。

4

4 回答 4

23

您可以使用 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/soniic/2HxPp/

于 2012-02-28T11:20:13.260 回答
6

您还可以查看：

https://github.com/ifandelse/Knockout.js-External-Template-Engine

于 2012-02-28T11:33:08.797 回答
4

您还可以使用此模板引导程序进行 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 个库背后的作者

于 2013-05-03T12:00:50.980 回答
3

以下是根据 soiiic 的回答构建的一个小功能：

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>
于 2014-04-07T01:10:29.567 回答