0

Nicholas Zaka の著書 'Maintainable JavaScript' に基づいて、私のページに小さな HTML テンプレートを配置する最善の方法は、次のようなものを追加することだと理解しています。

    <script type="text/x-templates" class="templates">
            <div class="template1"> ... </div>
            <div class="template2"> ... </div>
            ...
    </script>

<body>テンプレートを に配置して css を使用して非表示にするよりも、このアプローチの方が気に入っています。

私が現在jQueryでそれらをつかんでいる方法は次のとおりです。

    var $templates = $('<div/>').append($('.templates').text()).children();

私が試したもののうまくいかなかったのは次のとおりです。

    var $templates = $('.templates');
    var $templates = $($('.templates').text());
    var $templates = $($('.templates').html());

私が今持っている解決策はうまくいきますが、私にはあまりエレガントではないようです。これを行う最良の方法は何ですか？

4

3 に答える 3

0

$($('.templates').html())「テンプレート」クラスの内部 HTML がスペースで始まると苦労するので、$($('.templates').html().trim())代わりに必要になります。ただし、スクリプト タグの内部 HTML にはルート ノードがないため、さらに問題が発生します。そのため、代わりに次のようなものが必要になります。

<script type="text/x-templates" class="templates">
    <div>
        <div class="template1">temp1</div>
        <div class="template2">temp2</div>
        ...
    </div>
</script>

次に、次のような方法で template1 の HTML を取得できます。

var templatesCollection = $($(".templates").html().trim());
alert(templatesCollection.children(".template1").html());

とはいえ、各テンプレートを ID 付きの独自のスクリプト タグに入れてみませんか? （複数のインスタンスを持つことを計画していない限り、クラスはあまり意味がありません。テンプレートのシナリオでは、それはあなたが望んでいるものではないと思います。）

つまり、次のようなものです。

<script type="text/html" id="template1">
   <div>temp1</div>
</script>

そして、非常に単純なセレクター:$("#template1").html()

于 2013-04-03T23:35:33.440 に答える
0

編集:最初はあなたの質問を誤解していたと思います-同じタグ内に複数のテンプレートがあることに気づきませんでした。script各テンプレートを独自のタグに分割することをお勧めします。これは、管理が容易になる可能性があるためです (そうすれば、divそれらを分離するためだけに余分な解析やタグを使用する必要がなくなります)。たとえば、テンプレート マークアップについて次のように考えてください。

<script type="text/x-templates" class="template" id="template1">
    [template 1]
</script>

<script type="text/x-templates" class="template" id="template2">
    [template 2]
</script>

そして、あなたの JavaScript では次のようなものです:

// create a map of templates (keyed by the template's id)
var templates = {};
$('.template').each(function() {
    var $template = $(this);
    templates[$template.attr('id')] = $(this).html();
});

//usage
$('body').append(templates.template1);
$('body').append(templates.template2);

これが実際のデモです: http://jsfiddle.net/KyWj6/

于 2013-04-03T23:24:01.077 に答える
0

これを試して：

var $templateHtml = $('.templates').html();
var $templates    = $('<div/>').html(templateHtml);

または、1 行にします。

var $templates    = $('<div/>').html($('.templates').html());
于 2013-04-03T23:24:21.723 に答える