ajax 响应后重新渲染车把模板答案

【问题标题】：Re-render handlebars template after ajax responseajax 响应后重新渲染车把模板
【发布时间】：2016-01-08 14:25:56
【问题描述】：

在我的车把模板中，我有一个 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 请求的表单后，我想设置 flash 消息，然后如果请求成功，我只想更新页面的这一部分。但是我不想手动更新 html，但我想重新渲染上面显示的模板部分。我怎样才能做到这一点？我正在使用车把和 expressJS。

【问题讨论】：

标签： javascript ajax express handlebars.js

【解决方案1】：

您可以分离您的 ajax 响应模板并仅在响应之后呈现。

但是，我猜您想将所有内容保存在一个模板中，并且只将其附加到页面一次。 Handlebars 本身并不支持这一点，因为它旨在创建无逻辑模板并处理字符串而不是 DOM 元素。您可以通过使用 Handlebars 的助手来执行此操作，但也有许多其他流行的模板解决方案可能会为您解决问题，例如，请参阅谷歌搜索 data binding template。

如果你想用 Handlebars 来做这件事，我已经创建了一个你可以使用的助手。请参阅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);

【讨论】：