Замена заполнителей в HTML-фрагменте

Question

Рассмотрите фрагмент HTML, например, содержащий серию заполнителей (содержащихся в отдельных фигурных скобках).

<div> 
    { user.name } 
    { user.username } 
    { user.address.line1 } 
    { user.address.line2 } 
</div> 

и объект JavaScript, который выглядит следующим образом:

var user = { 
    name: 'Bob Foo', 
    username: 'bobfoo', 
    address : { 
     line1: '10 Foo Street', 
     line2: 'Footown' 
    } 
}; 

Какой самый лучший способ заменить заполнители эквивалентными переменными? Я ценю, что это базовая форма шаблонов, но я не хочу, чтобы зависимость сторонних сторон от рулей или аналогичных. Я также не хочу добавлять какие-либо особенности к шаблону, кроме самих заполнителей. Изменение разделителя-заполнителя на что-то другое было бы хорошо, если бы возникла определенная потребность в таком столкновении с другой библиотекой.

Это фрагмент JS из большего файла, который мы используем для разбора заполнителей. Он отлично работает, но я не уверен, что это хорошая практика, это, безусловно, не особенно элегантно! Само собой разумеется, мы хотим сделать это, не используя eval(), поскольку источником данных является стороннее лицо.

 var template = $(self.options.templateId).html(); 

     for (var k in user) { 
      if (!user.hasOwnProperty(k)) continue; 
      if(k == 'address'){ 
       for (var k in user.address) { 
        if (!user.address.hasOwnProperty(k)) continue; 
        var needle = "{ user.address." + k + " }"; 
        template = template.replace(needle, user.address[k]); 
       } 
      }else{ 
       var needle = "{ user." + k + " }"; 
       template = template.replace(needle, user[k]); 
      } 
     } 

Это часть плагина jQuery, поэтому любой конкретный код jQuery в порядке.

Благодаря

Answer 1

Если бы я должен был сделать это, я использовал AngularJS.

Для привязки данных к HTML вы можете использовать AngularJS.

Для будущего: AngularJS использовать двойные скобки {{}}, если использовать одиночные скобки критичными, что вы можете изменить его в AngularJS сценария.

var sampleApp = angular.module('YourApp', [], function($interpolateProvider) { 
    $interpolateProvider.startSymbol('{'); 
    $interpolateProvider.endSymbol('}'); 
}); 

Answer 2

вы должны использовать некоторые идентификаторы или классы для Примеру

<div id="box1"> 
<span class="name">{ user.name }</span> 
<span class="username">{ user.username }</span> 
<span class="line1">{ user.address.line1 }</span> 
<span class="line2">{ user.address.line2 }</span> 
</div> 

Так и может получить доступ к HTML с JQuery easiely, как это:

$('#box1 .name').html(user.name); 

или

$('#box1 .name').text(user.name); 

один из ESE должен Worke штраф

Answer 3

Лучше использовать популярный шаблон плагин: http://skilldrick.co.uk/tmpl/#slide6

Вместо использования пользовательского кода.

Answer 4

Есть выходной и что мне делать? код что-то вроде этого.
Пытался внедрить обработку шаблона с нуля. Он должен идеально соответствовать вашим потребностям:
В библиотеке не используется библиотека jquery для добавления скомпилированного шаблона в DOM. Не стесняйтесь использовать его.Any1 приветствуется, чтобы сделать этот код лучше или меньше;)

plunker

$(document).ready(function() { 
    var tmpl = 
    ' <div>'+ 
    ' { user.name }'+ 
    ' { user.username }'+ 
    ' { user.address.line1 }'+ 
    ' { user.address.line2 }'+ 
    '</div>'; 

    var user = { 
    name: 'Bob Foo', 
    username: 'bobfoo', 
    address : { 
     line1: '10 Foo Street', 
     line2: 'Footown' 
    } 
    }; 

    function compileTmpl(templateStr, data) { 
    var tmpl = ''+templateStr; 
    var tokens = tmpl.match(/\{(.[^{]+)\}/ig); 
    for(var i=0; i<tokens.length; i++) { 
     var t = tokens[i].replace(/([{}\s]+)/ig, ''); 
     if(t && t.length > 0) { 
     var propChain = t.split('.'); 
     var val = data; 
     for(var p=0; p<propChain.length; p++) { 
      if(val && val.hasOwnProperty(propChain[p])) { 
      val = val[propChain[p]]; 
      } 
     } 
     if(val.length > 0) { 
      tmpl = tmpl.replace(new RegExp('{[ ]*'+t+'[ ]*}', 'ig'), val); 
     } 
     } 
    } 
    return tmpl; 
    } 

    var compiledTmpl = compileTmpl(tmpl, {user: user}); 
    $('body').append(compiledTmpl); 

}); 

Выход:

<div> Bob Foo bobfoo 10 Foo Street Footown></div>