Re-рендеринг Рулей шаблона после АЯКСА ответа

Question

В моем шаблоне руля у меня есть DIV для отображения флэша-сообщений, как этого

 <div id="flashContainer" class="alert alert-dismissible alert-{{flash.type}}" style="display: {{#if flash}}block {{else}}none{{/if}}"> 
       <button type="button" class="close" 
         data-dismiss="alert" aria-hidden="true">&times;</button> 
        <strong>{{flash.intro}}</strong> {{{flash.message}}} 
      </div> 

После отправки формы с помощью Ajax запроса Я хочу, чтобы установить флэш-сообщение, а затем, если запрос успешно. Я хочу обновить только эту часть страницы. Однако я не хочу вручную обновлять html, но я хочу повторно отобразить часть шаблона, показанного выше. Как я могу это достичь? Я использую handlebars и expressJS.

Answer 1

Вы можете отделить свой шаблон ответа от ajax и отобразить его только после ответа.

Однако, я предполагаю, что вы хотите сохранить все это в одном шаблоне и добавить его на страницу только один раз. Handlebars не поддерживает это, поскольку он нацелен на создание шаблонов без логики и сделок со строками вместо элементов DOM. Вы можете сделать это с помощью помощника Handlebars, но есть также множество других популярных решений для шаблонов, которые могли бы сделать трюк для вас, например, поиск google data binding template.

Если вы хотите сделать это с помощью ручек, я создал помощника, который вы можете использовать. См. post-render-bars и его помощник-рендеринг. Вот demo за то, как использовать его для рендеринга ajax-ответа.

Помощник использует MutationObserver, здесь browser support info, см. webcomponents-lite для полиполния, если необходимо.

Краткое описание для соответствующего кода:

watch.js определяет функцию forHtml(html, callback), которая вызывает функцию обратного вызова, когда данный HTML встречается в DOM. Он изменяет html, чтобы временно иметь класс, который делает его уникальным.

helpers.js определяет помощника renderer и функцию createRenderer(getHtmlContentFn), которая переносит вашу функцию в средство визуализации и может быть передана в шаблон и использована в качестве аргумента для помощника.

Помощник использует функцию watch.forHtml, чтобы наблюдать за блоком, определенным помощником, и галстуками, которые вместе с рендерером. Всякий раз, когда вызывается функция renderer, соответствующий элемент DOM обновляется.

Вот сокращенный вариант примера я связан, шаблон:

<p>Ajax response below:</p> 
{{#renderer response}}<div>Loading...</div>{{/renderer}} 

И ЯШ:

var context = { 
    response: postHandlebars.createRenderer(function(data) { 
     return data; 
    }); 
}; 
var html = template(context); 
// append html somewhere to see the response 

$.ajax({ 
    type: 'GET', 
    url: 'some url' 
}).done(context.response);