ОЧЕНЬ простой Javascript templating

Может ли кто-нибудь сообщить мне о библиотеке, которая предлагает базовые шаблоны HTML?ОЧЕНЬ простой Javascript templating

I.e. все, что мне нужно, это библиотека, которая переводит placeholder в буквальное значение в HTML. Т.е., скажем, у меня есть следующий код:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Title</title> 
    </head> 
    <body> 
     <label>My Label:</label> 

     <div> 
      <label>Name:</label> 
      <input placeholder="Enter name..." /> 
     </div> 
    </body> 
</html>

То, что я хотел, это отметить некоторые заполнители в моей разметке, которая, в идеале, в упрощенном зрении, указует на переменную JavaScript.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>{{myApp.labels.title}}</title> 

     <script> 
      (function() { 
       window.myApp = { 
        labels: { 
         title: 'My Title', 
         label1: 'My Label', 
         name1: 'Name', 
         placeholder: 'Enter name' 
        } 
       }; 
      }()); 
     </script> 
    </head> 
    <body> 
     <label>{{myApps.labels.label1}}:</label> 

     <div> 
      <label>{{myApps.labels.name1}}:</label> 
      <input placeholder="{{myApps.labels.placeholder}}..." /> 
     </div> 
    </body> 
</html>

Я посмотрел на библиотеки, такие как Handlebars.js и Mustache.js, но это либо:

Подразумевает знак вверх вы хотите глубоко связаны с моделью.
Использование JavaScript, чтобы связать кусок метки до их соответствующих переменных

Таким образом, есть все, что проще (если то, что я написал, имеет смысл)? Большое спасибо.

источник

2014-09-09 keldar

Вы можете просто свернуть свой собственный:

function tmpl (markup, tmplvars, prefix) { 
    for(var key in tmplvars) { 
     if (tmplvars[key] instanceof Object) 
      markup = tmpl(markup, tmplvars[key], prefix ? (prefix + "." + key) : key); 
     else 
      markup = markup.replace(new RegExp("\{\{" + (prefix? (prefix + "." + key) : key) + "\}\}", "gi"), tmplvars[key]); 
    } 
    return markup; 
}

И использовать его так:

var MyTemplate = '<label>{{username.label}}<input placeholder="{{username.placeholder}}"/></label>'; 
var markup = tmpl(MyTemplate, {username:{label: "Username", placeholder: "Enter your username..."}});

jsfiddle

источник

2014-09-09 15:44:03

Спасибо! Я даже не понял, что существует функция tmpl :) – keldar

Да, возможно, потому, что такой функции нет. Он определен в приведенном выше фрагменте. –

О да - ха! Не уверен, как я это пропустил :), но в любом случае, очень полезно - спасибо. – keldar

ОЧЕНЬ простой Javascript templating

ответ

Смежные вопросы