javascript - Mustache.js 完成模板渲染后如何运行回调

Question

一旦 Mustache.js 完成渲染模板并将其插入到 DOM 中，是否有一种干净的方法来定义/运行回调函数？例如，像这样：

Mustache.render(template, viewModel, function() {...});

我能想到的最好的方法是计算视图模型中将插入 DOM 的节点数，然后使用 setInterval 检查 DOM 中是否存在这么多节点。一旦他们这样做了，我就可以调用我想要的函数。这对我来说似乎效率低下并且可能有问题，但我不知道还能做什么。

Answer 1

与 mustache 无关，实际上是关于 jQuery .html()。

$('.your_div').html(rendered).promise().done(function() {

// do your stuff

});

Answer 2

你不需要对 mustache.js 的render()函数进行回调，因为它是同步的。jquery.html()也是同步的。

如果您真的需要回调（无论出于何种原因），您可以自己编写代码：

var myrender = function(template, viewModel, callback)
{
    Mustache.render(template, viewModel);
    if(typeof callback === "function")
        callback();
}

// usage:
myrender(my_template, my_viewModel, function(){
    alert("I can do anything here!");
});

Answer 3

如果您还使用 jQuery，则可以使用：

$("#element").ready(function() {
  // do something when Mustache.js has finished rendering
});

Mustache.js 能够流式传输模板结果。这在项目的文档中有所描述，但最近被删除。我不确定这是否是故意的，但它似乎仍然有效。Mustache.to_html这描述了每次渲染模板块时调用的函数的可选回调参数。也许这可以帮助您解决问题。

Answer 4

你可以使用这样的东西：

displayData: function () {
    app.renderTemplate("test", app.data, function (returnValue) {
        $('.result').append(returnValue);
    });

},


renderTemplate: function (templatefile, data, callback) {
    var tpl = 'views/' + templatefile + '.mst';
    $.ajax(tpl,
        {
            dataType: "text",
            success: function (template) {
                var rendered = Mustache.render(template, data);
                callback(rendered);
            }
        });
}

详细的操作方法可以在这里找到： https ://www.chaensel.de/mustache-js-return-rendered-result-to-callback-function/