Menu
In my Ember.js application I have an index view with a list of various posts. I'm trying to implement a 'show' action that happens when a post is clicked on. What it should do is display a modal a more detailed version of the post. Each modal view for a post should also have its own URL. Also the index view that lists the posts should still be shown behind the post modal. Finally when the post modal is closed the URL should change back to the index URL
So far my routes are something like this:
App.Router.reopen
location: 'history'
rootURL: '/'
App.Router.map ->
@resource 'posts', ->
@route 'show', path: '/:post_id'
App.PostsShowRoute = Ember.Route.extend
model: (params) ->
App.Post.find(params.post_id)
This is my modal view (using Zurb Foundation reveal modal)
App.PostsShowView = Ember.View.extend
templateName: 'postModal'
classNames: ['reveal-modal']
didInsertElement: ->
@$().foundation('reveal', 'open')
I'm rendering into an outlet into my index template, but with the current set it navigates away from my index template and renders the modal only. Once again I'd like to have the modal render within the index page with its own URL, and upon being closed go back to the index URL.
967
A view in an Ember.js is used for to handle user events and also creates the re-usable component. The UI will be developed by using the views. The below figure shows how event handling occurs −
Handlebars templates in Ember.js are powerful and can be rendered by using Ember.View and inserted into DOM. You can set templateName property of a view to indicate which template to use.
When user clicks on the event the view turns a primitive event (a click) into a semantic event ( Event Handling) and transferred to the Ember.Route for to get the event action. Handlebars templates in Ember.js are powerful and can be rendered by using Ember.View and inserted into DOM.
If the view is in the DOM, the rendering process will be deferred to give bindings a chance to synchronize. If children were added during the rendering process using appendChild , rerender will remove them, because they will be added again if needed by the next render.
You can add an additional outlet to your application template for modals, and then render your modals into that outlet.
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>
App.PostShow = Ember.Route.extend({
renderTemplate: function() {
this.render('postModal',{outlet:'modal',into:'application'});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
