2

いくつかの内部テンプレートを使用して html ページを作成しました。URL jsfiddle を参照してください。

http://jsfiddle.net/hoven002/jQTDH/

テンプレートを外部にする最良の方法とその方法は?

よろしく、ケネス

4

2 に答える 2

5

私の意見では、このプラグインを使用するのが最善の方法です: https://github.com/ifandelse/Knockout.js-External-Template-Engine。

外部ファイルからテンプレートをプルする新しいテンプレート エンジンを有効にします。テンプレートをどこから取得するかを決定するための構成オプションもいくつかあります。

于 2012-06-05T13:11:02.430 に答える
2

jQuery 以外の依存関係なしで、テンプレートをロードする関数を作成しました。<script>動的にロードする各タグを属性でマークし、data-template-srcそこに HTML ファイルのパスを配置する必要があります。以下はコードと例です。

file://警告: AJAX を使用してテンプレートをロードするため、HTTP サーバーが必要です (プロトコルではローカルで動作しません)。

/main.js

// Loads all the templates defined with the tag data-template-src.
// Returns a promise that fulfills when all the loads are done.
function loadTemplates() {
    var templateLoads = [];

    $('[data-template-src]').each(function () {
        var templateElement = $(this);
        var templateUrl = templateElement.attr('data-template-src');

        // Load the template into the element and push the promise to do that into the templateLoads array
        templateLoads.push(
            $.get(templateUrl)
            .done(function (data) {
                templateElement.html(data);
            })
        );
    });

    return $.when.apply($, templateLoads);
}

// When all templates are loaded, apply bindings
loadTemplates().done(function () {
    ko.applyBindings({}, document.getElementById("htmlDoc"));
});

/index.html

<html id="htmlDoc">
  <body>
    <div data-bind="template: { name: 'exampleTemplate' }"></div>
    <script type="text/html" id="exampleTemplate" data-template-src="/assets/exampleTemplate.html"></script>

    <script src="/jquery.js"></script>
    <script src="/knockout.js"></script>
    <script src="/main.js"></script>
  </body>
</html>

/assets/exampleTemplate.html

<h1>Hello world</h1>

<div data-bind="template: { name: 'exampleSubTemplate' }"></div>

/assets/exampleSubTemplate.html

<h2>How do you do?</h2>
于 2013-12-19T08:47:13.060 に答える