0

当涉及到浏览器后退按钮和 emberjs 时，我观察到了不受欢迎的行为。如果用户点击后退按钮，页面会显示两倍渲染的车把模板。

如果历史足够长，甚至可以“工作”几次，页面变得越来越长。有人已经看到了这个问题（甚至解决了它）？

我的应用程序目前与 Trek 在http://trek.github.com/上展示的完全一样，只是我移到了 pre4 的新路由器 API。

版本

  • emberjs 1.0 pre4
  • 车把 1.0 rc1
4

1 回答 1

1

跟进我自己的问题。我的代码中有两个问题。其中一个我追踪并在这里分享解决方案，以防有人遇到类似问题。

我有一个模型定义，例如

App.Member.reopenClass({
  allMembers: [],
  findAll: function(){
    $.ajax({
      url: 'https://api.company.com/members',
      dataType: 'json',
      context: this,
      success: function(response){
        response.data.forEach(function(member){
          this.allMembers.addObject(App.Member.create(member))
        }, this)
      }
    })
    return this.allMembers;
  }
});

allMembers: []是保留所有成员的参考。来回时，成员从后端重新加载并再次存储在allMembers.

要解决这个问题，只需allMembers定义findAll：

App.Member.reopenClass({
  findAll: function(){
    var allMembers = [];
    $.ajax({
      url: 'https://api.company.com/members',
      dataType: 'json',
      context: allMembers,
      success: function(response){
        response.data.forEach(function(member){
          this.addObject(App.Member.create(member))
        }, this)
      }
    })
    return allMembers;
  }
});

第二个问题很可能也与我组合路线的方式有关。一旦我有解决方案，我会在上面发布。

更新，2013-01-22

好的，第二个问题也找到了，emberJS + 后退按钮现在可以正常工作了。同样，我想快速总结一下问题所在，以防有人也被它绊倒。

路由定义如下所示：

App.Router.map(function() { 
  this.resource("areas", { path: "/areas" });   
  this.resource("area",  { path: "/areas/:refId" }, function() {
    this.route("new",    { path: "/areas/new" });   
});

此外，“new”和“area”使用了相同的视图和控制器。因此，问题出在父路由“区域”及其子路由“新”之间。不建议尝试将所有内容组合在一起，并在控制器内做一些魔术来区分它是哪种情况……

所以，解决方案是：

  • 使用 mixins 来避免代码重复（'new' 和 'area' 都使用一些 Google Geocoder 的东西）
  • 创建一个漂亮而简单的路由，如下所示。

代码是

App.Router.map(function() { 
  this.route("areas",   { path: "/areas" });
  this.route("area",    { path: "/areas/:refId" });
  this.route("newarea", { path: "/area/new"});
});

就是这样。欣赏或评论。总是很高兴得到专家的意见

于 2013-01-21T23:14:50.187 回答