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

Ответ 1

Я предполагаю, что вы используете JS-вкус Усы.

В mustache.js объект partials может передаваться как третий аргумент Mustache.render. Объект должен быть привязан именем частичного, а его значение должно быть частичным текстом.

Вам необходимо:

Определите некоторые фиктивные данные для имени
Получите ваш частичный шаблон, получив HTML-код # li-templ
Создайте объект с именем частичного (li-templ) в качестве ключа
Скажите Усы для каждого шаблона с данными просмотра, включая ваши частичные

Вот некоторые 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/

Ответ 2

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

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

Я обнаружил, что шаблоны микширования (в тегах скриптов) с обычным HTML в страницах messes с моим редактором кода (подсветка синтаксиса, отступы и т.д.). Загрузка их в виде отдельного сервера делает ваш 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>