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/soniiic/2HxPp/

于 2012-02-28T11:20:13.260 に答える
6

以下も参照できます。

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

于 2012-02-28T11:33:08.797 に答える
3

これは、soniiicの答えから構築された小さな関数です。

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 に答える