Question

我想知道是否有人因使用Handlebar.js编译功能而遇到内存泄漏。

我目前正在开发一个单页应用程序，它通过Ajax调用定期从服务器轮询数据。每当我获得新数据时，我都会重新渲染视图。（我将Backbone.js与handlbar.js结合使用。我明白当我关闭视图或切换到其他视图时我需要手动释放视图对象，我认为这不是这种情况。至少，我认为它请不要。关于这个主题，请看这个链接：http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/）＆lt; - 我没有完全遵循这个方法，但我试图解除绑定所有事件和数据，并删除所有引用。

这是我的代码

// 1. Remove all the old dom 
//  -- purge all objects
//  -- remove dom

Helpers.Purge(this.el); //Purge function is copied from Douglas Crockford's blog
view.empty();

this.compileTemplate(view, viewData, this.model.get("Template"));

// 2. Append the new view
var thisDom = document.getElementsByClassName(this.className);
Helpers.Purge(thisDom);

$(thisDom).remove();
$article.append(this.el);

this.compileTemplate函数是这样的：

compileTemplate: function (view, data, templateSelector, ratio) {
    var templateSource = $(templateSelector).html(),
    template = Handlebars.compile(templateSource);

    var el = view.html(templateResult);
}

如果我评论出“var el = view.html（templateResult）;”我不会得到内存泄漏问题。一旦我取消注释这一行，IE 9的内存消耗就开始上升。（我强迫视图每0.5秒重新编译一次模板用于测试目的。）

我想知道Handlbar.js中是否存在已知的内存泄漏问题，或者我做错了。

非常感谢你。

干杯

新更新：

我试图找出问题，并编写了一个小程序来测试是否只是handlebar.js导致IE9上的内存泄漏。

这是代码。

(function ($) {
function render() {
    var templateSource = $("#template").html();
    var compileTemplate = Handlebars.compile(templateSource);

    var data = {
        users: [
                { username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                { username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                { username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
            ]
    };

    console.log("before compiling");
    var templateWithData = compileTemplate(data);
    $("#content").html(templateWithData);
    console.log("after compiling");


    //this.el = templateWithData;

}
setInterval(render, 500);

})(jQuery);

HTML代码在这里：

<!doctype html>
<html lang="en">
<head>

</head>

<body>
    <div id="content">

    </div>

<!-- JS -->
<script id="template" type="text/x-handlebars-template">
      <table>
        <thead>
          <th>Username</th>
          <th>Real Name</th>
          <th>Email</th>
        </thead>
        <tbody>
          {{#users}}
            <tr>
              <td>{{username}}</td>
              <td>{{firstName}} {{lastName}}</td>
              <td>{{email}}</td>
            </tr>
          {{/users}}
        </tbody>
      </table>
</script>

</body>
<script src="js/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/lib/handlebars-1.0.0.beta.6.js" type="text/javascript"></script>
<script src="js/complieTemplateWithoutBackbone.js" type="text/javascript"></script>

</html>

IE的记忆不断攀升，永不下降。有人可以看看这个。

非常感谢。

干杯

Answer 1

任何人都遇到同样的问题。

我有点解决了这个问题。我最后根本没有使用车把。我切换到了KnockOut.js，这是MVC4包的一部分。

KnockOut与IE很好地配合，但不是KnockOut的Mapping插件（一个帮助你映射javascript对象的插件），所以我不得不手动绑定对象的每个字段。这不是太多额外的工作。我很高兴使用KnockOut.js解决了内存泄漏。

希望Handlebar社区将来解决内存泄漏问题。

Handlebar.js IE9中的内存泄漏

1 个答案: