How do actions work with routes for rendered views? - ember.js

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

Related

Ember router breaks on redirect to '/'

I'm having a hard time making my router understand that we are on a certain page and it should be displayed in the navigation as active. The situation is as follows:
this.route('mainRoute', function() {
this.route('list');
});
The path we are interested in is /mainRoute. Unfortunately, there are a lot of legacy links that point to /mainRoute/list. The workaround for this was to redirect from the /mainRoute/list component back to the /mainRoute component.
beforeModel() {
this.replaceWith('/mainRoute');
}
Now, my issue is that the /mainRoute navigation link will never be seen as active. I've tried adding a path for the /mainRoute ('/', '/mainRoute', 'mainRoute'), I've tried transforming it to a resource and a bunch of other things that passed my mind. But it either won't work, or will go in an infinite redirecting loop.
Any thoughts on it? Thanks so much, I really need a solution for this!
If the navigation links are {{link-to}} components. There is a current-when property you could use here. It accepts either a boolean or a string. The string is a space separated values with the route names you want this link to be active when.
From the docs
If you need a link to be 'active' even when it doesn't match the current route, you can use the
current-when argument.
<LinkTo #route='photoGallery' #current-when='photos'>
Photo Gallery
</LinkTo>
{{#link-to 'photoGallery' current-when='photos'}}
Photo Gallery
{{/link-to}}

EmberJS 2.3 link-to issues

I am using Ember.js 2.3. I have a {{link-to}} that works on parts of the app and not other parts. Here is the {{link-to}}
{{#link-to 'leads'}}Leads{{/link-to}}
On the parts that it does not work, the link is still generated. If I inspect the element, I see:
<a id="ember397" href="/leads" class="ember-view">Leads</a>
However, the link is not clickable by the browser. Could it be connected to the {{outlet}}? The link that works is modifying the {{outlet}} and the link that isn't working is in the template generated inside the outlet.
I am new to Ember and not sure of the terminology or if I am asking it correctly.
It is something else going on in my code that is causing that page to not have links work.

Moving an ArrayController/View to a Component in Ember 1.13

I'm currently in the process of updating my Ember App to use 1.13 and am having an issue translating a particular Ember.View and its associated Ember.ArrayController into an Ember.Component, as per the Deprecation Guide.
After repurposing some code, I now have the following:
app/templates/page.hbs
{{example-component content=posts}} // "posts" being an array of objects
app/templates/components/post-list.hbs
{{#each content key="#index" as |post|}}
{{post.title}}
{{/each}}
In some cases, the order of the items in the posts array will need to change (via the Ember.SortableMixin), and these changes need to be reflected on screen. When I do this, however, it seems as though content isn't being binded correctly and doesn't update visually (though the order of the posts data is correct in the PageController).
I hope this makes sense. Any help is greatly appreciated!
With the help of #locks in Freenode IRC, I have an answer. The issue had to do with the key that was being iterated on in the {{#each}} loop. By changing it to key="#identity" (Ember 1.13.2) it now works as desired.

Ember.js - linkTo error on second call

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.

How to make basic ember setup in jsFiddle

I'm trying to test my ember code in my jsFiddle
I set framework to Ember 1.0.0-rc1 and onDomReady
and I added jQuery as a resource.
and I setup basic application template in html and declare application in js.
I think I set very basic of an ember app. but it doesn't work.
What am I missing here?
There is an up to date fiddle/jsbin link in the Ember Contributing document:
https://github.com/emberjs/ember.js/blob/master/CONTRIBUTING.md
It is always up to date with the master version of ember.
Two things are going wrong here.
There is a bug in the way jsFiddle has implemented ember support. First off it should be including jQuery, and also it is loading ember before handlebars. You can see what's going on by right-clicking on the output frame and selecting view-source. As a workaround, manually add references to these libraries.
You've got a typo. Instead of type="type/handlebars" you should specify type="text/handlebars"
Working fiddle here
You should definitely use emberjs.jsbin.com. It has everything already setup.