Блог

Всем привет,

Я играл с handlebars, пытаясь заставить его работать в моем проекте, но я продолжаю получать никаких результатов при тестировании страницы.

Я использую данные JSON, которые я получил с другой страницы. Эти данные должны отображаться после компиляции шаблона. Но на самом деле ничего не происходит, я просто не получаю никаких результатов вообще.

get_items_data.js

 var source = $("#mytemplate").html(); 
var template = Handlebars.compile(source); 

    var Items = Array();
    getting_items_data = true;
    $.get('GetItemsData',function(responseJson) {
        if(responseJson!=null){
            $.each(responseJson, function(key,value) { 
                Items.push({ "id": value['item_id'], "blabla": "bla" });
            });
        }
    });
    $('body').append(template(Items));
  

test.jsp

 <script id="mytemplate" type="text/x-handlebars-template"> 
<table>
    <thead> 
        <th>Items</th> 
    </thead> 
    <tbody> 
        {{#each this}} 
        <tr> 
            <td>{{id}}</td> 
            <td>{{blabla}}</td> 
        </tr> 
        {{/each}} 
    </tbody> 
</table> 
</script>
  

Формат данных JSON:

 [{"ItemID":74,"SectionID":4},{"ItemID":78,"SectionID":4}]
  

Есть идеи, что здесь может быть не так?

Похоже, что ваша шаблонная функция вызывается до того, как вы возвращаете данные, поэтому Items массив пуст, когда элементы добавляются в DOM. В отличие от AngularJS, Handlebars является статическим шаблоном, поэтому он не обновит DOM, если вы обновите массив позже.

Попробуйте переместить эту логику рендеринга в обратный вызов get :

 $.get('GetItemsData',function(responseJson) {
    if(responseJson!=null){
        $.each(responseJson, function(key,value) { 
            Items.push({ "id": value['item_id'], "blabla": "bla" });
        });
        $('body').append(template(Items));
    }
});
  

$(document).ready(function() {
LoadItems();
});

Никогда не будет выполняться внутри скрипта типа text / x-handlebars-template.

Также может возникнуть проблема с вашими переменными, пытающимися получить значения из dom до его загрузки.

Вот упрощенная версия, которая работает: http://jsfiddle.net/whDqv /

 function LoadItems()
{
    var source = $("#mytemplate").html(); 
    var template = Handlebars.compile(source);
    var Items = Array();
    getting_items_data = true;
    Items.push({ "id": 1, "blabla": "bla" });
    var template = Handlebars.compile(source); 
    $('body').append(template(Items));

}

$(document).ready(function() {
    LoadItems();
});