CTAPbIu_MABP's BLOG

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

Сам вопрос довольно прост, надо сделать сопряженные выпадающие списки, то есть выбрал что-то в одном, поменялись варианты ответов в другом, естественно ajax'ом. Как правильно собрать содержимое select'a в кучу если проходит JSON?!

Итак представим наш код

$.ajax({
    url : "my/back/end.json",
    type : "json",
    success : function (result) {/**/}
});

Вот, собственно, и надо реализовать функцию success. Учитывая что формат ответа:

[
{value:1,name:"CTAPbIu_MABP"},
{value:2,name:"Vasya Pupkin"},
{value:3,name:"%UserName%"}
]

Подавляющее большинство делает что-то вроде

function(result)
    var html = "";
    $(result).each(function(i, val) {
        /*
         * Предполагаю что хватает ума не писать ересь типа
         * $('select#id').append('<option value="' + val.value + '">' + val.name + '</option>');
         */
        html += '<option value="' + val.value + '">' + val.name + '</option>';
    });
    $('select#id').html(html);
}

Но если бы меня устраивало я бы не писал эту статью. Из этого надо выделить данные, они у меня в переменной result, и шаблон из <option ...>. Выделил, теперь переписываю.

var template = '<option value="[value]">[name]</option>';
...
function (result) {
    var html = "";
    $(result).each(function(i, val){
        html += template.replace(/(\[([^\[\]]+)\])/g, function($0, $1, $2){
           return val[$2] || "";
        });
    });
    $('select#id').html(html);
}

Что тут происходит? есть шаблон, который скорее всего будет браться откуда-то из вне. В шаблоне есть плейсхолдеры [key], имя плейсхолдера это свойство в получаемом объекте. регулярным выражением я заменяю плейсхолдеры на полученные данные, если в данных присутствует плейсхолдер, он так и останется плейсхолдером, потому что строка повторно не обрабатывается, если значения свойства не определено подставляется пустая строка.

Осталось придумать как натянуть все это целую форму...

Updated 29.06.10 Это все приобрело финальную форму и успешно используеться уже во втором проекте:

function T (data, template) {
    var html = "";
    $(data).each(function(key, val){
        html += template.replace(/(\[([^\[\]]+)\])/g, function($0, $1, $2){
           return val[$2] || "";
        });
    });
    return html;
}