Обработка шаблонов JSON и HTML в jQuery

Question

Как вы обрабатываете шаблоны HTML и JSON, не блокируя HTML в строках javascript?

У меня есть сайт с поддержкой ajax, который представляет много динамического контента путем интерполяции значений JSON с HTML. Это все отлично работает.

НО это означает, что у меня много JavaScript во всем JavaScript. Например:

var template = "<div>Foo: {bar}</div><div>Blah: {vtha}</div>";          
template.interpolate({bar:"bar",blah:"vtha"});      

Я немного обрезал это - некоторые из моих динамических элементов содержат много HTML-кода и многое другое.

Я использую jQuery и строю на Rails, поэтому, если в какой-то среде есть что-то умное, это было бы здорово.

Для справки, функция интерполяции строки, использованная выше:

String.prototype.interpolate = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
          var r = o[b];
          return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

Answer 1

Я бы определенно использовал подход «Загружать при необходимости».

Создайте небольшой виджет, который вы можете загрузить с помощью ajax, в комплекте с HTML, данными и так далее. Используйте функцию загрузки jquery.

$('#wrapper').load('/widgets/foobar/')

И пусть сервер создаст все ваши элементы, которые вам нужны. Это будет еще загрузка данных для каждого виджета. Но вам не нужно создавать их на стороне клиента. Я бы сказал, что «за» вес минусы в этом. Поскольку клиенту будет проще просто добавить уже проанализированный html, а не создавать его в javascrtipt.

Answer 2

Если вы хотите сохранить код шаблона HTML в HTML и вне JavaScript, просто сделайте что-то подобное.

Javascript:

$(document).ready(function() { var template = $('#template-example').html(); template.interpolate({bar:"bar",blah:"vtha"}); });

HTML:

<div id="template-example" style="display:none;"> <div>Foo: {bar}</div><div>Blah: {vtha}</div> </div>

Answer 3

Вы пытались использовать Дистальные шаблоны , которые позволяют определять шаблон как HTML.