web-dev-qa-db-ja.com

HTMLで口ひげの部分を定義する方法は？

これは私のhtmlです：

<script type="text/html" id="ul-template">
    <ul id="list">
        {{> li-templ}}
    </ul>
</script>  

<script type="text/html" id="ul-template2">
    <div id="list2">
        {{> li-templ}}
    </div>
</script>    

<script type="text/html" id="li-templ">
    <p>{{ name }}</p>
</script>

ご覧のとおり、#li-templの部分を再利用したいのですが、li-templ.mustacheというファイルに書き込む必要があるようです。その後、partialとして含めることができますか？
単一のhtmlファイルでそれらを定義できますか？

javascripthtmlmustache
25
wong2

MustacheのJSフレーバーを使用していると思います。

Mustache.jsでは、パーシャルのオブジェクトを3番目の引数としてMustache.renderに渡すことができます。オブジェクトはパーシャルの名前でキー設定され、その値はパーシャルテキストである必要があります。

必要がある：

  1. 名前のダミーデータを定義する
  2. ＃li-templのHTMLを取得して、部分的なテンプレートを取得します
  3. 部分（li-templ）の名前をキーとしてオブジェクトを作成する
  4. Mustacheに、部分テンプレートを含むビューデータを使用して各テンプレートをレンダリングするように指示します

これを行うためのjQueryを次に示します。

var view = {"name" : "You"},
li = $('#li-templ').html(), 
partials = {"li-templ": li},
ul1 = Mustache.to_html($('#ul-template').html(), view, partials),
ul2 = Mustache.to_html($('#ul-template2').html(), view, partials);;

document.write(ul1, ul2);

これがjsFiddleのすべてです- http://jsfiddle.net/maxbeatty/EYDfP/

28
maxbeatty

ICanHaz.js （ICH）がこれを支援します。

ICanHaz.js ：Mustache.jsでクライアント側のテンプレートを作成するためのシンプルで強力なアプローチ。

（scriptsタグ内の）テンプレートをページ内の通常のHTMLと混合すると、コードエディター（構文の強調表示、インデントなど）が混乱することがわかりました。それらを別のサーバーとしてロードすると、HTMLがクリーンに保たれます。

チェックアウト this ICHサーバーからの<script type="text/html" src="my-templates.html"></script>の自動ロードのプルリクエスト ファイルごとに1つのテンプレートに。

リモートHTMLファイルごとに複数のテンプレートをロードする 次のような単純なコードを使用することもできます。

function getTemplates(url) {
    $.get(url, function (response) {
        $('template', response).each(function () {
           ich.addTemplate(this.id, $(this).text());
        });
    });
}

または、ICHをページのURLから自動的にロードする場合：

<head>
    <link rel="templates" type="text/html" href="my-templates.html">
</head>

$("link[type=templates]").each(function (index, link) {
    getTemplates(link.attr("href"));
});

あなたのmy-templates.htmlで

<templates>
    <template id="ul-template">
        <ul id="list">
            {{> li-templ}}
        </ul>
    </template>  

    <template id="ul-template2">
        <div id="list2">
            {{> li-templ}}
        </div>
    </template>    

    <template id="li-templ">
        <p>{{ name }}</p>
    </template> 
</templates>
5
Joel Purra