I have a problem using ember especially the linkTo helper.
Here is the : jsfiddle
I can't make the jsfiddle work but here is a link to a running version : running version on cloudfoundry
I use ember-resource.js to get data.
I have two routes, "list" and "item".
Ember modules :
List (controller, route, view and template)
Item (controller, route, view and template)
ItemDetail (controller, view and template) which is included with the controller helper in the Item handlebars template.
The problem is :
When accessing the application from the default route ("#/list") the previous link works perfectly. But when I access the application from a item route ("#/item/1"), the previous link works fine the first time and then doesn't work any more...
And I honestly don't know what I'm doing wrong...
Any help would be appreciated...
Don't hesitate to ask extra info
Thanks in advance
Note : I really appreciate ember-resource.js but the stackoverflow tag doesn't exist... Could anyone with 1500 reps create it?
Actually, it's a bug in ember.js that's been solved but not yet released.
It's in the control helper that calls rerender on childViews... Uncommenting this line solved the problem.
Related
I'm trying to create a loading substate for the Application route using the new named substate options added recently, but for some reason, I can't get it to work. Originally, I just had created a simple template, loading.hbs, and it worked automatically, but because of the issues with substates on the application route, some of my UI was still visible. I'd like to correct this now.
I've tried renaming and moving the template around to the following places:
/templates/application_loading.hbs
/templates/application-loading.hbs
/templates/application/loading.hbs
None seem to work though. I don't need any custom routing behavior so the default generated route should do me, unless its a requirement for this to work. Documentation on this feature seems to be sparse. I found the jsbin for this feature and I should be doing it correctly according to it unless there's some issue with ember-cli.
Thank you for any assistance.
DEBUG: -------------------------------
DEBUG: Ember : 1.11.1
DEBUG: Ember Data : 1.0.0-beta.16.1
DEBUG: jQuery : 1.11.2
DEBUG: -------------------------------
I believe that loading.hbs and error.hbs are the application's loading and error substates. Your application-loading.hbs doesn't exist to Ember, which is why it's not working.
As for the additional UI elements: I believe the rest of application.hbs is going to render regardless, so the only suggestion I would have is to nest all those elements one level deeper. It sounds like a big ordeal, but it's actually not that bad:
In router.js:
this.resource('whatever', {path: '/'} function() {
// All your existing routes
});
Then rename application.hbs to whatever.hbs and change application.hbs to just have {{outlet}} in it. This should really change very little else in practice, but it will keep the rest of your UI elements from rendering until loading is complete.
Really should've google it before adding the bounty.
Evidently, this feature is broken. There's a fix already though, just needs to be merged and released.
It looks like you must have a moduleBasedResolver
https://github.com/emberjs/ember.js/blob/06e41ad7ccd28558dd4e651aa070bc06f7757821/packages/ember-application/lib/system/application-instance.js#L153
https://github.com/emberjs/ember.js/blob/b80d66f71d75ad0db9022438ed58a41ac84f45f5/packages/ember-routing/lib/system/router.js#L79
When I look at this value in an ember-cli app it's undefined. Which seems odd because ember-cli is es6 module based.
Then I found this https://github.com/emberjs/ember.js/issues/10756 looks like you can add a route application-loading or hack in moduleBasedResolver onto the registry as a temporary solution.
and
https://github.com/emberjs/ember.js/pull/10944
should fix the issue in the longer term.
It appears you already found this, it did not appear loaded when I wrote this answer. Sorry for the noise.
Can someone tell me why "Action" does not work here? Has it got to do with my route?
{{#linkTo "content.friend" this}}
http://jsbin.com/EtOjuTe/17
http://jsbin.com/EtOjuTe/19 (Here is the version with it uncommented and thus no output)
Thank you.
The first argument to linkTo is the name of the route that you want to link to. You don't have a route called content.friend, so Ember fails when trying to build the link.
I would expect that you would want to use contact.friend, but that's not working either. I think this is due to the jsbin being set up with an old version of Ember. I can get it to at least build the link by using just friend. Since the friend route is nested under contact that means Ember needs two models to be involved in the link.
Since the contact is attached to the friend model as who, you can do this:
{{#linkTo "friend" who this}}
That gets the link to build, but the id for contact is undefined. Again I suspect that an old version of Ember is at fault.
Here's the Ember docs about linking to routes with multiple dynamic segments. http://emberjs.com/guides/templates/links/#toc_example-for-multiple-segments
Here's a semi working jsbin : http://jsbin.com/OdoHaGi/1/edit
Edit(current jsbin http://jsbin.com/univer/17/edit ) see comments
Output:: http://jsbin.com/univer/3/
Code:: http://jsbin.com/univer/3/edit
I'm not using the ID for the url, I'm using a slug I pass in. I don't know if that has anything to do with the issue but I can navigate directly to the nested route.
If you go here jsbin.com/univer/3#/projects/ , everything works as intended. However, if you try to go here jsbin.com/univer/3#/projects/project-1, the page is blank.
Using the rest adapter, I have the projects view rendering with the same code but the model never get's set on the project view. When you navigate directly to the page, the view renders but all you see is "This is the model:" without the name.
Any help is greatly appreciated. If needed, I can make my API public to test on the REST adapter itself but thought the fixture adapter should work the same.
Brett
First issue is with the setupController method for App.ProjectRoute. It is missing the controller, model arguments.
App.ProjectRoute = Ember.Route.extend({
setupConroller:function(controller, model){
controller.set('model',model);
},
Next issue is that the FixtureAdapter does not support findQuery out-of-box. If you're planning to use RestAdapter instead this might not be important, but if you want to make things work in jsBin using FixtureAdapter will need to reopen DS.FixtureAdapter and add a custom queryFixtures method. Advice on how to do that can be found here: https://stackoverflow.com/a/18165887/983357
Im currently working through the Ember.js Getting started Guide, but i'm using v1.0.0-rc.6.3 instead of RC3.1 as mentioned in the Guide.
Now i reached the chapter about implementing the editing of single todos, but the {{action}} handler implemented in the Guide dosn't seem to work, so my fist assumption is that the behavior of events changed.
Here is my code so far in a JSBin: http://jsbin.com/ogixej/1/edit
As you can see, when you double click a todo item a error is raised in the console:
Uncaught Error: Nothing handled the event 'editTodo'.
Could you tell me what changed an how i'm supposed to do it in a correct manner?
Since your TodoController is the controller responsible for the items you need to define this on your TodosController, like this:
Todos.TodosController = Ember.ArrayController.extend({
itemController: 'todo',
...
});
This way the editTodo function is correctly invoked. Here your working jsbin.
Hope it helps.
I recognize that this should be a comment, but my reputation is too low, yet.
While #intuitivePixel's answer is correct, and accepted, it did not work for me later in the example, during the Transitioning examples (Getting Started Guide - Adding Child Routes). Once I broke the templates apart, I had to move the itemController property from the controller and into the template, during the {{#each}}, like so:
{{#each itemController="todo"}}
...
{{/each}}
If you look closely, you can find this code in Ember's first example block, but it's not called out in the surrounding narrative, so I missed it.
I was trying to fully understand the previous answer of the question emberjs - how to mark active menu item using router infrastructure
In the answer I tried to simplify (without using a outlet navigation and without adding a second level routing under the root) but in my case the active link doesn't work ://
Here's a fiddle :
http://jsfiddle.net/archange/Scqxw/
What I don't understand in the fiddle is why the "isActive: function()" is not updated after the set on the router... :/
So if someone passing by can explain me the reason. Big Thanks.
And if someone has another solution for handling navigation menu (perhaps using bindAttr ?)
Thanks
What is happening here is that when a template/view creates another view, it gives the newly created view access to it's controller. For example:
<script type="text/x-handlebars" data-template-name="application">
{{view App.NavigationView}}
</script>
The controller of the navigation view is going to be the instance applicationController. This is expected behavior.
If you want to tell your newly created NavigationView to use another controller, just pass that in, like so:
{{view App.NavigationView controllerBinding="navigationController"}}
Please note that I wired these two controllers together in App.ready.
Here is your edited fiddle: http://jsfiddle.net/Scqxw/5/