【问题标题】:Handling transition into route via back button通过后退按钮处理到路线的过渡
【发布时间】:2013-01-27 02:37:22
【问题描述】:

情况是这样的。我正在编写一个 Ember.js 示例,其中我在页面上显示一个便签列表。每个注释都有一个固定链接,单击该链接时,会将列表缩小 6 列而不是 12 列,然后在空白处显示注释。单击链接时它工作得很好,但是当我使用后退按钮返回列表时,它不起作用。这是我的代码:

App.Router.map(function(){
  this.resource("notes", function(){
    this.resource("note", { path: "/:note_id" });
  });
});

App.NotesRoute = Ember.Route.extend({
  model: function(){
    return App.Note.find();
  },
  setupController: function(controller){
    controller.set("isShowing", false);
  }
});

App.NoteRoute = Ember.Route.extend({
  setupController: function(){
    this.controllerFor("notes").set("isShowing", true);
  }
});

每个州都有一个模板:

<script type="text/x-handlebars">
  <div class="row">
    <div class="twelve columns">
      <h1>Ember Stickies</h1>
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="notes">
  <div class="row">
    <div class="twelve columns">
    <h3>My Notes</h3>
    </div>
  </div>
  <div class="row">
    <div {{bindAttr class="isShowing:six:twelve :columns"}}>
      <ul class="block-grid four-up mobile-one-up">
      {{#each note in controller}}
        <li class="sticky-list-item">
          {{view Ember.TextArea classNames="sticky-note" valueBinding="note.content"}}
          {{#linkTo note note classNames="sticky-permalink"}}
            ∞
          {{/linkTo}}
        </li>
      {{/each}}
      </ul>
    </div>
    {{outlet}}
  </div>
</script>

当 Ember 调用 NoteRoutes setupController 时,它会将 isShowing 设置为 true。但是,当我使用后退按钮返回NotesRoute 时,不会调用setupController,因此isShowing 永远不会更改为false。我认为这是有意的 Ember 行为,那么我可以使用回调来挂钩此转换吗?

【问题讨论】:

  • 在这种情况下,路由似乎具有 exit 函数。但是,当我实现它时,我的 note 模板永远不会被删除。嗯...
  • 啊,要打电话给this._super()

标签: ember.js


【解决方案1】:

从 Ember 1.0.0-rc.1 开始,deactivate 已添加为 exit 的公共挂钩。您不再需要致电_super,也不应再使用exit

App.NoteRoute = Ember.Route.extend({
  setupController: function(){
    this.controllerFor("notes").set("isShowing", true);
  },
  deactivate: function(){
    this.controllerFor("notes").set("isShowing", false);
  }
});

http://emberjs.com/api/classes/Ember.Route.html#method_deactivate

http://emberjs.com/blog/2013/02/15/ember-1-0-rc.html

【讨论】:

    【解决方案2】:

    我通过搜索 Github 问题找到了答案。路由有一个exit 回调,会在转出时触发。我的路由处理程序现在看起来像(n.b. 在exit 末尾调用this._super() - 非常重要!):

    App.NoteRoute = Ember.Route.extend({
      setupController: function(){
        this.controllerFor("notes").set("isShowing", true);
      },
      exit: function(){
        this.controllerFor("notes").set("isShowing", false);
        this._super();
      }
    });
    

    【讨论】:

    • Exit 不再是一个钩子,这就是为什么你绝对需要调用 this._super()
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-10-25
    • 1970-01-01
    • 2017-03-27
    • 1970-01-01
    • 2013-04-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多