2012-02-23 2 views
1

У меня есть вспомогательный метод handlebars, который извлекает json-объект через ajax, и тогда я хочу отформатировать json в html и вставить его в шаблон.хелпер-выход ручек не отображается в шаблоне

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

 
Handlebars.registerHelper("accounts_dropdown", function() { 
    function get_dropdown(callback){ 
    var dropdown='Select Account'; 

    $.ajax({ 
     url: 'accounts', 
     success: function(response){ 
      for(var i=0;i<response.length;i++){ 
      dropdown+=' < option value="'+response[i].id+'">'+response[i].name+'</option>'; 
       } 

      callback(dropdown); 
      } 
     }); 
    } 

    get_dropdown(function(dropdown){ 
     console.log(dropdown); 
     return new Handlebars.SafeString(dropdown); 
    }); 
    }); 

и в моем шаблоне у меня есть

 

{{accounts_dropdown}} 

+0

Есть некоторые скопировать/вставить ошибку с вашим примером? Ваш цикл for все искалечен и, очевидно, отсутствует код json-> html, о котором вы говорили. –

+0

Извините @jake, я забыл отформатировать мои html-теги, поэтому он не отображался должным образом. – pedalpete

ответ

5

Это не будет работать, потому что вы загружаете ниспадающее меню асинхронно. Ваша вспомогательная функция должна вернуть значение для ручек для вставки в шаблон, но ваш помощник фактически ничего не возвращает. Одним из вариантов было бы загрузить его синхронно, например, так:

Handlebars.registerHelper("accounts_dropdown", function() { 
function get_dropdown(){ 
var dropdown='Select Account'; 

$.ajax({ 
    url: 'accounts', 
    async: false, 
    success: function(response){ 
     for(var i=0;i<response.length;i++){ 
     dropdown+=' < option value="'+response[i].id+'">'+response[i].name+'</option>'; 
      } 
     } 
    }); 

return dropdown; 
} 

return new Handlebars.SafeString(get_dropdown()); 
}); 
+0

Удивительный Джейк, спасибо. Я выполнил ваше правило «async», но сначала оставил его в отдельной функции, что, как ни странно, не сработало, но теперь, когда я выполнил ваш код до «t», он работает. – pedalpete

+0

асинхронная ложная часть заставляет ее работать, но побеждает цель Ajax. Еще большой ответ :-) –

1

Я немного Laste к партии, но я только что имел подобную проблему и нашел решение самостоятельно.

Просто позвольте помощнику вернуть div со случайным/уникальным идентификатором и включить обратный вызов ajax в ответ.

var id = 'my-async-template-' + Math.floor(Math.random() * 11); 

$.ajax({ 
    url: 'accounts', 
    async: false, 
    success: function(response){ 
    $('#' + id).html(response); 
}); 

return '<div id="' + id + '"></div>'; 
} 

Конечно, чтобы заставить его работать с точной задачи ФП ты должен был бы генерировать весь HTML блок на сервере или сделать некоторые JavaScript, чтобы впрыснуть с соответствующими параметрами выпадающего списка.

EDIT:

На второй мысли, вы будете ввести условие гонки, если вы делаете это таким образом, так что не забудьте отложить тх АЯКС вызов, пока рули закончил свою работу

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