StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I was able to handle the click using a function in the events property of the router (thanks sly7_7) or using a function in the controller:</p> <p>Template:</p> <pre><code><script type="text/x-handlebars" data-template-name="application"> <h1>Content Here:</h1> {{outlet content}} </script> <script type="text/x-handlebars" data-template-name="content-view"> <h2>content</h2> <button {{ action "createNewApp" }} class="btn btn-primary">Create application</button> </script> </code></pre> <p>JS:</p> <pre><code>var App = Ember.Application.create(); App.CreateAppView = Ember.View.extend({ templateName: "content-view" }); App.CreateAppController = Ember.Controller.extend({ createNewApp: function(){ console.log("It's clicked, controller"); } }); App.Router.map(function(match) { match('/').to('createApp'); }); App.CreateAppRoute = Ember.Route.extend({ renderTemplates: function() { this.render({ outlet: 'content'}); }, events: { createNewApp: function(){ console.log("It's clicked, router"); } } }); </code></pre> <p>When the button is clicked, the console log message is <code>"It's clicked, controller"</code> and when the function in the controller is removed the action is handled by the router, and the console log message is <code>"It's clicked, router"</code>. If no target is specified in the <code>{{action}}</code> Ember tries to find the event in the view, then the controller, then the route. </p> <p>This is using a build of emberjs built today from source.</p> <p><em>Original answer below:</em></p> <p>The <code>{{action}}</code> in the new router is replaced with <code>{{linkTo}}</code>.</p> <p>The emberjs.com guides are constantly being updated with new info about the new router. The <a href="http://emberjs.com/guides/templates/links/" rel="nofollow">links</a> guide covers the <code>{{linkTo}}</code> helper, and the <a href="http://emberjs.com/guides/templates/actions/" rel="nofollow">actions</a> guide discusses using the <code>{{action}}</code> helper to handle events in templates.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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