Overriding Ember's default behavior in {{linkTo}} - ember.js

The ember guide on {{linkTo}} says:
By default, Ember.js will replace the segment with the value of the object's id property.
I would like to use a different property say profileName(unique String) instead of the id property. Has anyone done this? Any help is appreciated.
Thanks

You have two choices:
You create your custom linkTo handlebars helper, or
Or your hook into the model hook of your route to alter the deserialization, and the serialize hook also in the route for serialization. In this hooks you are able to alter the default behavior from the linkTo helper

Related

how to pass the Ember dynamic property from beforeModel of route to template handlebar

I want to pass a dynamic variable which is achieved from beforeModel of a route js to corresponding template's handlebar. I know that model data can be passed through model hook. However this is not model data. Also, there is no controller involved since i don't think pass variable from route to controller then template shouldn't be the easiest way.
thanks.
From ember guides beforeModel hook is appropriate for cases,
1) A decision can be made to redirect elsewhere without needing to resolve the model first.
2) Any async operations need to occur first before the model is attempted to be resolved.
so in your case, I will encourage you to do that stuff in setupController hook. if you still want to pass data from beforeModel to template then suggested solution would be, set result in route and get those values and set it in controller through setupController hook. Note: You will get default controller for every route.
This is some route data that you need in your template, that sounds like model data to me!
Also, there is always a controller involved, as one is created by the framework to be the context of the template. What this means is that the model() hook actually sets the model property of the controller, and any {{property}} you look up in your template is looked up in the related controller.
Pass the data along with the rest of the data in the model() hook.

Is there a way to have an Ember link-to helper fire on keyPress?

I am in the process of getting our product to WCAG 2.0. I know with actions I can specify that it fire on="keyPress". Before I start replacing all of our link-to's with actions, is there support for specifying link-to events? I haven't happened across anything hinting at it in the docs.
Edit: The link-to's I'm having issues with have a tagName that is different from an anchor.
Consider passing eventName property to link-to component.
{{#link-to 'users' eventName='mouseEnter'}} Users {{/link-to}}
This will transitionTo users route when mouse over the link-to element.
Note: I am not sure how do you use keyPress event for link-to component
I'm reworking my markup so that the link-to's to use their default tagName (a), which solves my problem. This isn't the accepted answer as the issue still remains that when you use a tagName that is different than the default, there doesn't appear to be a way to transition on key events. My primary use case is working with link-to's as table rows.

Is there a way to use render with an existing controller instance rather than letting it create a new one?

I have an AnswersValidationController and which I use in this manner:
{{render 'answers-validation' answersValidation}}
and
this.controllerFor('answersValidation') OR needs: ['answersValidation'].
Regardless of the order in which needs/controllerFor is used, the 'render' and controllerFor/needs result in two different instances of the same controller 'answersValidation'. Why? How do I prevent that?
Note: the render and controllerFor/needs are used in the same route. Also, even if I use {{render 'answers-validation'}} - it creates another controller instance.
Is there an alternative to {{render}} in which case I can use the singleton controller instance?
That's the intended behaviour. By default Ember controllers are singletons however the
{{render}}
helper will create it's own instance of the controller if a model is provided. That way you can have multiple times the same controller on the same page with different model for each one. You can check the render documentation for more details : http://emberjs.com/guides/templates/rendering-with-helpers/
Edit: To answer the new title, to render an existing controller with {{render}}, you can't specify a new model.

Does Ember Model attributes support default value?

I know that Ember Data attributes can have default values with defaultValue property but does Ember Model support this? If so, how?
It doesn't support default values as of yet. If you really needed to use ember model and still wanted this functionality, you could extend the adapter your using to handle it, or if you are only using the model in a single route you could fix up the model in the afterModel hook (I don't like that idea, because if you ever use that model anywhere else you're hosed). I'd probably modify the ember model code and submit a PR if you can't use ember data. Sorry

accessing the model from the template

Playing around with ember, I found that sometimes the model is stored on the controller's content property, sometimes the model is directly available on the controller as well. I do not understand however, when this is the case.
Let me explain it by an example which I found when assembling my ember MVC.
Setup A - The start
I defined a custom Member object, corresponding MemberRoute, MemberView classes and a template with the name member.
The Member object had some attributes such as id, nickname, etc.
NOTE: no controller of the form MemberController was defined, thus by ember's convention, it provides the controller on its own.
Setup B - The customization
Same as setup A, but now there is a MemberController defined that contains some action methods that are triggered from within the template.
The strange behaviour (resp. what I do not completely understand)
in setup A, I can refer to the Member's attributes directly with {{id}} or {{nickname}}.
in setup B, I have to use {{content.id}} or {{content.nickname}}
As documented in ember's documentation, MemberView does
setupController : function(controller, member) {
controller.set('content', member);
},
So, could somebody help me to understand why the difference and where the difference is? Currently, my guess would be either
that the context of the template is different (possibly there is a code piece missing in the setup of the controller?)
or
the default controller that is provided by ember automatically, has some additional magic that is not directly avaiable for customized controllers.
Any help to understand this is highly appreciated. It already took my quite a while to come as far as this. I first thought it could be the modularization introduced by the project setup with requireJS (well, I still think that could have a influence). Ember is v1.0pre4.
Thanks in advance!
Patrick
So, could somebody help me to understand why the difference and where the difference is? Currently, my guess would be either
that the context of the template is different (possibly there is a code piece missing in the setup of the controller?)
or
the default controller that is provided by ember automatically, has some additional magic that is not directly avaiable for customized controllers.
It's hard to say for sure without seeing your code, but my best guess is that your MemberController extends Ember.Controller. The default provided by ember (in this scenario) would have been an Ember.ObjectController. If that's what you want, change your MemberController definition to:
App.MemberController = Ember.ObjectController.extend({
myProperty: 'value'
});
An objectController acts as a proxy to it's content property, typically that is an ember model. So if things are wired up correctly you should never need to access a model via the 'content` property. If you ever see something like:
{{content.id}} or {{content.nickname}}
it's a sign that you should change to an ObjectController. See EMBER GUIDES: REPRESENTING A SINGLE MODEL! for a more detailed explanation.
an ObjectController acts as proxy to the object set to the controller's content. When no controller is defined, Ember will create a controller for you and set its content by default to whatever object is returned by the model() function, if defined, in the route. The behaviour should be the same whether you define your own controller or let Ember define one for you
The default context in the template is the controller itself i.e. this = an instance of your controller or the generated one. When you try to access nickname in that context, Ember will first try to resolve it against the controller itself and if nothing is found, it resolves it against its content, i.e the object if you already manually set it to the controller's content.
Finally, there is no default implementation of the model() function in the Route except when you're using dynamic urls, say /foo/id that resolves against /foo/:id, Ember uses the id provided to load a Foo object with the id provided, thus providing a default implementation to the model() function. At the end it boils down to the same mechanism, only automated for your convenience.
I suggest you listen to this for more insights on how things are automated for you by Ember. But when it comes to the content being displayed, there is no magic you have to manually wire the content of the controller.