Question

我一直试图找出为什么在我去儿童路线后DOM元素留在页面上。当我从艺术品/索引到艺术品/新时，所有元素都留在页面上。如果我刷新浏览器窗口，视图会正确显示，之前的屏幕元素会消失。

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的bug？

您可以在行动here中看到错误。

Answer 1

在artworks/index模板中，第一行显示结束div。这就是导致错误的原因。

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

</div>

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

Answer 2

显然路由很好，一切都是由未关闭的html标签引起的错误。我刚刚发现了一条错误消息： The metamorph tags, metamorph-6-start and metamorph-6-end, have different parents.

是由左</ul>而不是/table引起整个视图混乱造成的。现在它工作正常。

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

2 个答案: