Ajax響應后重新渲染車把模板

Question

在我的車把模板中，我有一個div以顯示這樣的Flash消息

        <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響應模板，然后僅在響應之后進行渲染。

但是，我猜您想將其全部保留在一個模板中，並將其僅附加到頁面一次。 車把本身不支持此功能，因為它旨在創建無邏輯的模板並處理字符串而不是DOM元素。 您可以使用輔助工具使用輔助工具來完成此操作，但是還有許多其他流行的模板解決方案可以幫您解決問題，例如，參見google搜索數據綁定模板 。

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

幫助程序使用MutationObserver ，這是瀏覽器支持信息，如果需要，請參見webcomponents-lite以獲取polyfill 。

相關代碼的簡要說明：

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

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

助手使用watch.forHtml函數監視由助手定義的塊，並將其與渲染器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);