Question

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

如果历史记录足够长，那么“工作”甚至会多次，并且页面会变得越来越长。有人已经看到了这个问题（甚至解决了它）？

我的应用程序目前正是Trek在http://trek.github.com/所展示的，除了我转移到pre4的新路由器API。

版本

emberjs 1.0 pre4
车把1.0 rc1

Answer 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'使用了相同的视图和控制器。所以，问题出在父路线'area'和它的子路由'new'之间。尝试将所有组合在一起，并在控制器中做一些魔术来区分它是什么情况，这是不推荐的......

所以，解决方案是：

使用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"});
});

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

浏览器单击后，DOM中的模板重复

1 个答案: