javascript - Ember.js 过渡渲染错误或错误的路由

Question

我一直在试图弄清楚为什么 DOM 元素在我进入子路由后仍保留在页面上。当我从艺术品/索引转到艺术品/新时，所有元素都保留在页面上。如果我刷新浏览器窗口， View 将正确显示，并且前一个屏幕的元素会消失。

App.Router.map(function() {
  this.resource('artworks', function() {
    this.route('new');
  });
  this.resource('artwork', { path:'/artworks/:artwork_id' });
  this.resource('critique', {path: '/critiques/:critique_id'});
  this.resource('doc', {path: '/docs/:doc_id'});
});

App.IndexRoute = Ember.Route.extend({
  redirect: function () {
    this.transitionTo('artworks');
  }
});

App.ArtworksRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('artwork');
  }
});

App.ArtworkRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('artwork', params.artwork_id);
  },
  setupController: function(controller, model) {
    controller.set('content', model);
    controller.set('doc', this.store.find('doc', model.get('doc-key')));
    controller.set('critique', this.store.find('critique', {'artwork-key': model.get('id')}));
  }
});

我听从了建议，创建了艺术品模板、艺术品/索引和艺术品/新

<script type="text/x-handlebars">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <a class="navbar-brand" href="#">{{App.applicationName}}</a>
        <ul class="nav navbar-nav">
            <li>{{#link-to 'artworks.new'}}Upload artwork{{/link-to}}</li>
        </ul>
        <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">The User</a></p>
    </div>
  </nav>

     {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="artworks">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="artworks/index">
  <div class="container-fluid carousel-wrap">
    {{partial 'carousel'}}
  </div>
  <div class="container">
    <div class="row">
     <div class="col-md-12">
      <div class="jumbotron">
          <h1>Welcome to Vonalasfüzet!</h1>
          <p>Our goal is to help aspiring writers to reach their goals.</p>
          <p><a class="btn btn-primary btn-lg" role="button">Get to know more</a></p>
      </div>
      <div class="col-md-10">
       <table class="table table-striped">
         <thead>
             <tr>
             <th>Title</th>
             <th>Genre</th>
             <th>Revision</th>
             <th>Word count</th>
             <th>Operations</th>
             </tr>
         </thead>
            {{#each}}
                <tr>
                <td>{{title}}</td>
                <td>{{genre}}</td>
                <td>{{revision}}</td>
                <td>{{word-count}}</td>
                <td>{{#link-to 'artwork' id}}View{{/link-to}}</td>
                </tr>
            {{/each}}
          </ul>
      </div>
     </div>
    </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="artworks/new">
  <div class="container">
   <div class="row">
    <div class="col-md-12">
          <form role="form">
              <div class="form-group">
                  {{input type="text" class="new-artwork form-control" placeholder="New Title" value=newTitle}}
              </div>
              <div class="form-group">
                  {{input type="text" class="new-artwork form-control" placeholder="New Genre" value=newGenre}}
              </div>
              <div class="form-group">
                  {{view App.TinymceView valueBinding="newBody"}}
              </div>
              <div class="form-group">
                  <button {{action 'save'}} class="btn btn-default new-doc-button" {{bind-attr disabled=disabled}}>Add</button>
              </div>
          </form>
          <li class="list-group-item">{{#link-to 'artworks'}}Back{{/link-to}}</li>
      </div>
     </div>
    </div>
  </script>

但是，当我单击“上传图稿”链接时，似乎新模板的内容被插入到索引模板内容的上方。是路由问题还是 Ember.js 错误？

您可以看到正在运行的错误 here 。

Answer 1

在 artworks/index 模板中，第一行有一个结束 div。这就是该错误的原因。

<script type="text/x-handlebars" data-template-name="artworks/index">

</div>

删除它，一切都会正常工作。