Как определить части усов в HTML?

Question

Как определить части усов в 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?

25

javascript html mustache

задан FruitBreak 14 November 2012 в 13:52

1 ответ

Другие вопросы по тегам:

javascript html mustache

Похожие вопросы:

score 5 · Answer 1

ICanHaz.js (ICH) может помочь вам в этом.

ICanHaz.js : простой / мощный подход для создания шаблонов на стороне клиента с Mustache.js.

Я обнаружил, что смешивание шаблонов (в тегах сценариев) с обычным HTML на странице мешает моему редактору кода (подсветка синтаксиса, отступы и т. Д.). Загрузка их в качестве отдельного сервера сохраняет ваш HTML в чистоте.

Посмотрите этот запрос ICH для автоматической загрузки <script type="text/html" src="my-templates.html"></script> с вашего сервера в один шаблон на файл.

Вы также можете загрузить более одного шаблона для каждого удаленного 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>