重新渲染車把模板

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，但我想重新呈現上面顯示的模板的一部分。我怎樣才能做到這一點？我正在使用手柄和expressJS。

Answer 1

你可以分開你的ajax響應模板並在響應之後渲染它。

但是，我猜你想保留在一個模板中，並將其附加到頁面只有一次。 Handlebars本身不支持這一點，因爲它旨在創建無邏輯模板並處理字符串而不是DOM元素。您可以使用Handlebars幫助程序完成此操作，但也有很多其他受歡迎的模板解決方案可能爲您提供幫助，請參閱Google搜索data binding template。

如果你想用把手做，我已經創建了一個可以使用的幫手。請參閱post-render-bars及其渲染器助手。這裏有一個demo如何使用它來呈現ajax響應。

該幫手使用MutationObserver，這裏是browser support信息，如果需要，請參閱webcomponents-lite的polyfill。

用於相關代碼簡要說明：

watch.js定義了一個函數forHtml(html, callback)當在DOM中遇到給定的HTML觸發的回調。它修改了html，暫時讓它有一個獨特的類。

helpers.js定義了幫助程序renderer和函數createRenderer(getHtmlContentFn)，它將您的函數包裝到渲染器中，並且可以將其傳遞給模板並用作幫助程序的參數。

幫助程序使用watch.forHtml函數來監視由幫助程序定義的塊並將其與渲染器一起綁定。無論何時調用渲染器函數，都會更新相關的DOM元素。

這裏的示例的縮短的版本我聯繫，模板：

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

和JS：

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);