Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use a generic <code>{{action }}</code> in your template but have the specifics of the "go back" implemented in the router. This works because Ember <a href="http://emberjs.com/guides/templates/actions/#toc_target-bubbling">bubbles up</a> the <code>goBack</code> event first to the controller, then the current route, then the parent route, etc, until an action handler is found. In this case, there is no matching action on the controller, so it is handled by the current route. This keeps your template/view/controller agnostic to the specifics, but when you are hooking up the widget you can specify how the "go back" should be handled.</p> <p>In the example the same button causes the route to change to different routes depending on which route is the current route:</p> <ul> <li>in route <code>/posts</code> the back button transitions to <code>/</code></li> <li>in route <code>/posts/new</code> the back button transitions to <code>/posts</code></li> </ul> <p><a href="http://jsbin.com/emakuh/1/edit">JSBin example</a></p> <p>Javascript:</p> <pre><code>App = Ember.Application.create({}); App.Router.map(function() { this.resource('posts', function() { this.route('new'); }); }); App.PostsRoute = Ember.Route.extend({ events: { goBack: function(){ this.transitionTo('index'); } } }); App.PostsNewRoute = Ember.Route.extend({ events: { goBack: function(){ this.transitionTo('posts'); } } }); </code></pre> <p>Template:</p> <pre><code>&lt;script type="text/x-handlebars" data-template-name="index"&gt; &lt;h2&gt;Index Content:&lt;/h2&gt; {{#linkTo posts}}Posts{{/linkTo}} {{outlet}} &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="posts"&gt; &lt;h2&gt;Posts&lt;/h2&gt; &lt;button {{action goBack}}&gt;Go back&lt;/button&gt; {{#linkTo posts.new}}New{{/linkTo}} {{outlet}} &lt;/script&gt; &lt;script type="text/x-handlebars" data-template-name="posts/new"&gt; &lt;h2&gt;Posts/New&lt;/h2&gt; &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload