13 сентября 2012 г.

Простой шаблонизатор на JavaScript без компилирования шаблона

Шаблон:

var template = '\
    <div class="container">\
        <p>{{shortbio}}</p>\
        <ul>\
        {{foreach albums as album}}\
            <li {{if album.selected == true}} class="selected"{{endif}}>\
                {{album.name}} ({{album.year}})\
            </li>\
        {{endforeach}}\
        </ul>\
        \
        <select>\
        {{foreach albums as album}}\
            <option {{if album.selected == true}} selected{{endif}}>\
                {{album.name}} ({{album.year}})\
            </option>\
        {{endforeach}}\
        </select>\
    </div>\
';

Данные:

var data = {
    albums: [
        {name: 'Golden Heart',              year: '1996'},
        {name: 'A Night In London',         year: '1996'},
        {name: 'Sailing to Philadelphia',   year: '2000'},
        {name: 'The Ragpicker’s Dream',     year: '2002'},
        {name: 'Shangri-La',                year: '2004', selected: true},
        {name: 'One Take Radio Sessions',   year: '2005'},
        {name: 'Kill To Get Crimson',       year: '2007'},
        {name: 'Get Lucky',                 year: '2009'}
    ],
    
    shortbio: 'Марк Фро?йдер Но?пфлер OBE (англ. Mark Freuder Knopfler; 12 августа 1949, Глазго, Шотландия) — британский рок-музыкант, певец и композитор, один из сооснователей группы Dire Straits.'
};

Код:


Результат:


Скрипт шаблонизатора: github
Скрипт примера: templater_example.js