Question

在我的车把模板中，我有一个div来显示像这样的flash消息

num=10^(count-1)

提交带有ajax请求的表单后，我想设置flash消息，然后如果请求成功，我想只更新页面的这一部分。但是，我不想手动更新html，但我想重新渲染上面显示的模板部分。我怎样才能做到这一点？我使用了把手和表达.JS。

Answer 1

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

但是，我猜你想把它全部保存在一个模板中并只将它附加到页面一次。 Handlebars本身并不支持这一点，因为它旨在创建无逻辑模板并处理字符串而不是DOM元素。你可以使用Handlebars帮助你做这个，但也有很多其他流行的模板解决方案可以帮到你，比如google search data binding template。

如果你想用Handlebars做，我已经创建了一个你可以使用的助手。请参阅post-render-bars及其渲染器助手。这里有demo，了解如何使用它来呈现ajax响应。

帮助者使用MutationObserver此处的browser support信息，如果需要，请参阅webcomponents-lite了解填充。

相关代码的简要说明：

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

helpers.js定义了帮助器renderer和函数createRenderer(getHtmlContentFn)，它将您的函数包装到渲染器中，并且可以传递给模板并用作帮助器的参数。 / p>

帮助程序使用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响应后重新渲染手柄模板

1 个答案: