在 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 响应模板分开并仅在响应后呈现。

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

如果你想用 Handlebars 来做，我已经创建了一个你可以使用的助手。请参阅 post-render-bars and its renderer helper. Here's a demo 了解如何使用它来呈现 ajax 响应。

如果需要，助手使用 MutationObserver, here's browser support info, see webcomponents-lite 作为 polyfill。

相关代码的简要说明：

watch.js 定义了一个函数 forHtml(html, callback)，当在 DOM 中遇到给定的 html 时触发回调。它修改 html 以暂时具有使其独一无二的 class。

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

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

Re-render handlebars template after ajax response

javascript

ajax

express

handlebars.js