ember.js - 转到新路线时未删除 Emberjs 模板

Question

我正在尝试学习和使用 Ember，但遇到了一些我无法弄清楚的问题。

我有一些嵌套的路线，当导航到子路线时，它不会从 socket 中删除旧模板，而是将新模板添加到它的前面。尽管我尝试过的任何事情都无法阻止它这样做.甚至删除路由的嵌套。

这是我的未嵌套路由代码

Ember.TEMPLATES["application"] = Ember.Handlebars.compile('<!-- Fixed navbar --><div class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="#">Workout tracker {{title}}</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li></ul><ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a><ul class="dropdown-menu"><li>{{#link-to \'userIndex\'}}Users{{/link-to}}</li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more separated link</a></li></ul></li></ul></div><!--/.nav-collapse --></div></div><div class="container outlet">{{outlet}}</div> <!-- /container -->');

Ember.TEMPLATES["userEdit"] = Ember.Handlebars.compile('<form role="form"><div class="form-group"><label {{bindAttr for="view.nameField.elementId" }}>Name</label>{{view Ember.TextField valueBinding="name" class="form-control" viewName="nameField"}}</div><div class="form-group"><label {{bindAttr for="view.lastnameField.elementId" }}>Last Name</label>{{view Ember.TextField valueBinding="lastname" class="form-control" viewName="lastnameField"}}</div></form>');

Ember.TEMPLATES["userIndex"] = Ember.Handlebars.compile("<table class=\"table table-striped table-bordered table-hover\"><thead><th>Name</th><th>Lastname</th></thead><tbody>{{#each}}<tr {{action 'navigateTo' this}}><td>{{ name }}</td><td>{{ lastname }}</td></tr>{{/each}}</tbody><table>");

(function() {
  var attr, tracker;
  tracker = Ember.Application.create({
    LOG_TRANISITIONS: true,
    LOG_VIEW_LOOKUPS: true
  });
  tracker.ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: "data"
  });
  attr = DS.attr;
  tracker.Router.map(function() {
    this.route("userIndex", {
        path: "/user"
    });
    return this.route("userEdit", {
        path: "/user/:id"
    });
  });
  tracker.User = DS.Model.extend({
    name: attr("string"),
    lastname: attr("string")
  });
  tracker.Workout = DS.Model.extend({
    date: attr("string"),
    description: attr("string")
  });
  tracker.UserIndexRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find("user");
    },
    actions: {
        navigateTo: function(user) {
            return this.transitionTo("userEdit", user.id);
        }
    }
  });
  tracker.UserEditRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find("user", params.id);
    }
  });
}).call(this);

当导航到/user 路径时，它会正确显示带有用户列表的 userIndex 模板。如果我然后单击链接转到/user/1，它会在 userIndex 模板上方加载 userEdit 表单，而不会删除 userIndex 模板。如果我然后单击返回，userEdit 表单将被 userIndex 模板替换，但旧的仍然存在，所以我最终得到了该表两次。我可以无限重复此广告并最终得到多个表格。

如果不清楚，我们深表歉意，但很难解释。

谢谢

Answer 1

#emberjs 中 IRC 上的 lindsey-s 告诉我，当缺少结束标记元素时，有时会发生这种情况。果然，我用细齿梳检查了我的模板，发现缺少关闭的 div 标签!解决了这个问题，问题就消失了!