Как применить JQuery усы для внешнего файла / шаблона

Question

В настоящее время я использую это, чтобы «получить» мой внешний HTML-файл, а затем использовать усы, чтобы добавить к идентификатору этого шаблона:

 $.get('block.html', function(data) {
        $('#mydiv').append(data);

            var list = {
                       name : 'whatever'  
            };

            $('#Block').mustache(list).appendTo('#mydiv');
    });

, и файл block.html будет выглядеть так:

<script id="Block" type="x-tmpl-mustache">
My name is {{name}}
</script>

Теперь, есть ли лучший способ сделать это, потому что в данный момент я добавляю дважды?

Answer 1

Ну, плагин jquery усы отлично подходит для случая, когда шаблон находится внутри вашего текущего документа.

Но здесь у вас есть другой вариант использования, и помощники, предоставляемые самими усами, достаточны для выполнения этой работы.Итак, просто:

$.get('block.html', function(template) {
    var view = {name:'whatever'};
    var html = Mustache.to_html(template, view);
    // and now append the html anywhere you like
});

И в этом случае ваш block.html может стать:

My name is {{name}}

Answer 2

Вы можете использовать Chevron для загрузки внешних шаблонов из файлов, например:

Вы добавляете в свой html ссылку на файл шаблона:

<link href="path/to/template.mustache" rel="template" id="templateName"/>

Затем, в вашем JS вы можете визуализировать ваш шаблон так:

$("#templateName").Chevron("render", {name: "Slim Shady"}, function(result){
    // do something with 'result'
    // 'result' will contain the result of rendering the template
    // (in this case 'result' will contain: My name is Slim Shady)
});

Документы Chevron приведут больше примеров