How does one get ember to call the LoadingRoute each time one a dynamic route e.g. product/1 and product/2.
I've create a jsbin to illustrate the problem.
If you don't want to eager load all zoobats, the first time you go to any bat resource, you could change your router to
App.Router.map(function() {
this.route('foo');
this.resource('bat', {path: "/zoo/:bat_id"});
});
Now define App.BatRoute and change link-to's route from 'zoo.bar' to 'bar'. You will get loading for each dynamic route, without adding ZooLoadingRoute and you don't have to eager load all zoobats.
Check this jsbin
A work around that sly7-7 posted which works can be found here
Basically define a LoadingRoute at most one level down from the route with the dynamic segment. For
App.Router.map(function() {
this.route('foo');
this.resource('zoo', function(){
this.route('bat', {path: "/:bat_id"});
});
});
this means having a ZooLoadingRoute in your app.
Related
from this post it seems that sub directories within ember controller should work.
https://github.com/ember-cli/ember-cli/issues/1219
however its not working for me .
here is my code branch like (directory cm contains a child directory views):
/controllers/cm/views/item.js
/routes/cm/views/item.js
/templates/cm/views/item.js
when i try to populate the model in route using the code below i see the data but when i put the same code in controller it never gets executed.
model: function(){
return this.store.find('item',{id: "1"});
}
entry in router.js is as follows:
this.resource('cm', {path: '/cm/:id'} , function() {
this.route('views');
this.route('views.items', {path: '/views/items'});
});
Clearly ember is not able to resolve the controller correctly.
Not sure how to fix this ...
That its becuase the model hook in a route works differently than in the controller.
in a route it is a method that can return a promise, the route will wait for the promise to be resolved before setting up the controller.
in the controller, it is just an attribute, which won't get executed until you getit, and even then, all you will get its a promise.
Wat?! Subdirectories work just fine. First, I'm not sure it's the best idea to use views or items as route names, as they're both very generic, and also used in some of the ember internals and can confuse things. Declaring a model called View could very well even break things in your app.
The controller/route/template structures for your router.js will be as follows:
<controllers|routes|templates>/cm.js
<controllers|routes|templates>/cm/index.js
<controllers|routes|templates>/cm/views.js
And I'm not sure what views.items would look like, because this would probably be better suited to making views a resource instead, or using a dash in the name, in which case the route declaration would be this.route('views-items', {path: '/views/items'});
Overall, I think your router definition should look like so:
this.resource('cms', function() {
this.resource('cm', {path: '/:cm_id'}, function() {
this.route('views');
this.route('views-items', { path: '/views/items' });
});
});
This isn't meant to be a quip--I'm here to help--but I think you need to spend a little more time with Ember's routing documentation to understand the conventions that Ember is expecting for certain router definitions. Also, the ember inspector tool is a really great asset when debugging router issues: https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi
I have the following routing setup:
this.resource('blog',function(){
this.resource('selectimage',{path:"selectimage/:returncontext"},function(){});
});
this.resource('post',{path:":post_id"},function(){
this.resource('selectimage',{path:"selectimage/:returncontext"},function(){});
});
What I would have expected is, when navigating to blog.selectimage and post.selectimage, that the same router,controller and view would be used.
Unfortunately it seems that the last entry wins.
Is it possible to achievie this, without leaving the parent context(post/blog), when navigating to selectimage
(Obviously I could inherit from the base-selectimages-classes, but I'm hoping there is some generic ember way of doing this.)
You cannot have same resource name for two different routes as Ember relies more on naming conventions. But Ember provides ways to reuse the same controller and templates
Rename your selectimage under post to something else
this.resource('post',{path:":post_id"},function(){
this.resource('xxx',{path:"xxx/:returncontext"});
});
And in the router, you could specify the templateName and controller that has to be reused. Something like this should make it reusable
App.xxxRoute = Em.Route.extend({
controllerName: 'selectimage',
templateName: 'selectimage'
});
Sample Demo
I have a route that has a dynamic segment:
this.resource('dog', {path: '/dog/:pet_id'});
For debugging purposes, I would like to linkTo dog with the specific dynamic segment of '666'. But
{{#linkTo 'dog' '666'}}Click to go to dog{{/linkTo}}
is giving me "undefined" instead of "666". Do you know why?
See it running on jsbin.
See the code on jsbin.
Your working jsbin: http://jsbin.com/iwiruw/346/edit
The linkTo helper does not accept strings as a parameter, but instead model from which to pick up the dynamic segments defined in your router map. If you don't have a model at hand leave the parameter out, and all you need to do is to hook into the serialize function of your DogRoute (if you don't have one defined just define it to instruct ember to use yours instead of the automatically defined) and return an object/hash containing the dynamic segments your route expects, this could be anything you want:
App.DogRoute = Ember.Route.extend({
serialize: function(model) {
return {pet_id: 666};
}
});
Hope it helps.
I cleaned up the code a little bit by removing unused bits and switching to the fixture adapter. Here's a working version without the need for a serialize method: http://jsbin.com/iwiruw/347
Ultimately, nothing needed to be changed in the base code beyond using a newer version of Ember and properly setting up the actual model classes and data.
The application that I am writing uses both EmberJS route (using #) and normal traditional HTML anchors. There are reasons for doing so and using normal anchor is not something that I can avoid at the moment.
I used to use the following line in my Router map.
this.route('catchAll', {path:"*:"});
The above used to work until I updated to RC6 and I start getting the "Uncaught Error: There is no route named ..."
Is there a new way to do catch all in the current version of Ember?
It would seem that if your hashes do not begin with a '/' they will not work any more. I would say that this is a bug in the rc6 router.
It appears to me as if it's still working. Would you mind showing me a jsfiddle with it not working?
App.Router.map(function() {
this.route('index', {path: '/'});
this.route('catchAll', { path: '*:' });
this.route('place', {path: '/place'});
});
jsfiddle of it working on RC6
Is it possibly failing somewhere else? Is it failing on a programmatic transitionTo instead of a href change? If so, it probably has to do with the new router pushed in by machty and we should probably submit a bug.
I'm using ember.js with location: "history". The first route of my site that is loaded (i.e. the one I type into the URL) renders fine. I can click a linkTo anchor to get to a second route, but when I click the back button to return to the first route (the initially loaded one), it is not routed.
Is there something I can do to push that initial route into the history? Should I need to do this?
My route mapping looks like this:
App.Router.reopen({
location: "history"
});
App.Router.map(function() {
this.resource("foods", function(){
this.route("index", {path: "/"});
});
this.route("fourOhFour", { path: "*:"});
});
Note: it doesn't seem to matter whether I begin at http://mysite.example/ or http://mysite.example/foods. In either case, attempting to back onto the initially loaded route has no effect.
I believe that perhaps I should be pushing something into the history but don't know how to do it, nor why I should need to. "fourOhFour" is just my handler for undefined routes, BTW. I don't think it's related to this issue.
Any advice welcome.
Good catch on this one. I just ran into the same issue and started digging around into the Ember.HistoryLocation. I found this commit on github to a fork of ember.js that fixed the problem for me:
https://github.com/teddyzeenny/ember.js/commit/c2c483dc592bb926c210e2c4c174dba7314d18dd
... I actually just merged the diff from this commit to my local copy of ember.js, and am now running history routing just fine for dev, which is good enough to keep me going until this will get wedged back into the main project.