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