Question

我正在努力学习和使用Ember，但是遇到了一些我无法弄清楚的东西。

我有一些嵌套路由，当导航到子路由时，它不会从插座中删除旧模板，而是将新模板添加到它中。我尝试过的任何内容都不会阻止它执行此操作。甚至删除路线的嵌套。

这是我的代码与unnested路线

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标签！修正了，问题就消失了！

Emberjs模板在进入新路线时未被移除

1 个答案: