I'm trying to set up an ember.js application where I have two panels side by side on a page. There's a link from one panel and when you click on it, it transitions to another route and the template for this route loads in the second panel -- but the first panel doesn't change. I haven't been able to get this working. I click on the link and the second panel loads, but the first panel is emptied. Can someone point me to a place that might have some more info on how to do this -- or a simplistic jsbin. Both would be incredibly helpful. Thank you!
In this case your second panel would best be served by being a child of the first panel.
App.Router.map(function() {
this.resource('panel1', function(){
this.resource('panel12');
this.resource('panel13');
})
});
Example: http://emberjs.jsbin.com/mimoteba/1/edit
Related
I want to load a connexion page then a home page with a navbar etc...
My problem is about {{partial}} and {{outlet}}.
I don't really understand because when I {{#link-to}} my next home page, connexion is still here... I don't know what instruction write in application.hbs in order to load Connexion.hbs then index.hbs with navbar... Can someone help and explain me ?
I just want to load connexion.hbs when I load my website, then I click on "sign in" I want to load another page with a navbar (I already have this code, thanks bootstrap) and home page. I just need some link between my pages.
EDIT : I changed my connexion.hbs route's path into / everything is ok now ! Thanks !
First: never use {{partial}}!
Next everything you put in the application route is visible the whole time! So thats usually only your navigation.
Different pages you want should be different routes. The first route visible is the index route.
Is it possible to have a route, say images/ show a list of images, and on click have an image open in a modal/viewer, say images/viewer/10, that has navigation (previous links to images/viewer/9, next links to images/viewer/11), updating the viewer modal while keeping the background images/ behind the modal as is, so that you can cancel the modal and go back to images/ without reloading the route?
see https://ember-twiddle.com/1da304530ea1367389361213fcf839c6?openFiles=templates.images.hbs%2C
You can define your routes like this:
Router.map(function() {
this.route('images', function() {
this.route('viewer', {path: "/viewer/:id"});
});
});
Pay attention in file structure in twiddle (images parent route for outlet and viewer nested route for modal, not images index route).
And then, you can show the modal viewer template in an outlet defined in images template.
Well, when you navigate to /images, you will see images template, without the modal. And the route's hooks will have executed.
From images, if you navigate to /images/viwer/x, the viewer route hooks will execute, but not images, because have already been executed.
When you navigate from images/viewer/x to /images will do the same (images route hooks will not execute one more time).
Hope this helps.
regards
When a user loads the app for the first time show this page. This should be simple but I got confused on how to do this. I know how to create routes and link them.
Do I need to create an index route ?
Router.map(function() {
//Show this route first
});
An index route is there by default. You should just implement templates/index.hbs and it will be rendered.
I'd like to implement a Pinterest style modal page for items (images/items/posts/etc...). Whichever page you are on, when you click on a item a modal with the item details pops up, and the page (feed) where you are from still sits in the background. The url in the address bar changes so you can link to the item from other sites or share it to your friends. And when you close the item modal your still at the feed.
Does Ember support this type of routing?
I know react-router has support for it, so I imagine Ember would as well as it is heavily inspired by Ember-router.
Source: https://github.com/rackt/react-router/tree/master/examples/pinterest
"The url /pictures/:id can potentially match two routes, it all depends on if the url was navigated to from the feed or not."
"Click on an item in the feed, and see that it opens in an overlay. Then copy/paste it into a different browser window (Like Chrome -> Firefox), and see that the image does not render inside the overlay. One URL, two session dependent routes and UI :D"
Linked Ember.js discussion: http://discuss.emberjs.com/t/pinterest-style-routes/8487
I think there is no such native behavior since one path will match one route, but it can be managed with some outlets and conditional display and nested routing.
The following router will provide almost everything needed to perform what you want:
// router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('pictures', function() {
this.route('picture', {
path: '/picture/:picture_id',
resetNamespace: true
});
});
});
export default Router;
With route nesting, you should be able to display the pictures list if provided by the pictures route (and show link to single result), choose single picture display (popup vs single result) based on the presence or not of the results (picture route can access pictures model with this.modelFor('pictures')), and still get the benefits of the identifiable resource URL pattern.
YMMV, but you can also juggle with the picture's route renderTemplate method to render the result in specific outlet if you want to completely separate single picture rendering from pictures tree.
EDIT: link to react example is broken, did you mean https://github.com/rackt/react-router/tree/master/examples/pinterest?
EDIT2: Adding route to a modal/overlay in Ember.js
sorry for my English. I will try to explain better I can.
I have an application in EmberJS, this application have its routes. Also, when I click in a button, I should show a Modal Window and change the route. That problem was resolved. The problem is. This modal window must to be a kindly of wizard, so when the user click on next, I should to change the route and show inside the modal the correct content, when the user click in next again, the route must to change again but the new content should be showed into the modal too.
The problem seems to be, ember takes my application outlet and show the new content inside that outlet, not inside of the outlet defined into the modal.
How I achieve this?