Как определить усы в HTML? - PullRequest
Новая
       5

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

25 голосов
/ 10 ноября 2011

это мой 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-файле?

Ответы [ 2 ]

28 голосов
/ 19 января 2012

Полагаю, вы используете аромат усов JS.

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

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

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

Вот какой-то 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/

5 голосов
/ 16 ноября 2012

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>
...