replaceRoute with an object id - ember.js

I want to use the replaceRoute in an ember controller but need to pass an object id. Something along the lines of:
this.replaceRoute('projects.edit', 4)
Is that possible at all or should it be done differently? It's going to the route I tell it to but with an object id of undefined.

Is that possible at all or should it be done differently?
replaceRoute expects to be passed the route's context, not an id. You can use the id to locate the context, for example:
this.replaceRoute('projects.edit', App.Project.find(4));
Here is a jsfiddle demonstrating how this approach using the fixture adapter
http://jsfiddle.net/mgrassotti/mhyjG/1/

Related

Append query parameters after queryParam update in Ember.js

I defined the queryParams in the controller and I need to add additional query parameters which is not used in the Ember application and it can have any name. It's an analytics thing. Those query parameters are not known in advance thus, we are not able to define those analytics values in the queryParams property. What happens now is Ember deletes all additional parameter after the queryParams and URL binding is triggered.
Example:
In the Controller:
queryParams: ['fin', 'ftw'],
fin: null,
ftw: null,
url:
localhost:3000?fin=111&ftw=121&anatylicsvalue=1
when I change the value of fin or ftw, anatylicsvalue is removed. I need the app to retain that bit of string.
What is the best way of doing this?
You need to define analyticsvalue within queryParams array of the controller, or queryParams json object of the router whether or not it is going to be used by the controller. So, if you declare queryParams as ['fin', 'ftw', 'analyticsvalue'] it will retain.
In order to achieve a somewhat dynamic query parameter (where even the name of the parameter is not known in advance), the only option I can suggest is using a named query parameter and using JSON.stringify to put the query parameters with that name. Take a look at the following twiddle. index.js route defines queryParams as queryParams: ['fin', 'ftw', 'additionalParams'] and additionalParams query parameter holds dynamic parameters since it is a JSON object that can hold any dynamic sub-parameter. Take a look at the updateAdditionalParams inside actions it defines a dynamic property and dynamic values as you can see.
Unfortunately, Ember does not support custom query parameters that are not known in advance. You can use the approach I have illustrated in the twiddle. Hope this helps.
Unfortunately, Ember does not support custom query parameters that are not known in advance.
It's a shame there's no "remainder" capability, if I understand what you're saying correctly. If an SPA was called with the requirement that any query parameters that it does not understand must be passed through verbatim on all its outgoing URLs, the SPA would need to scrape these off itself during routing, outside the Ember mechanisms? Do I have this right?
With controllers going away, will all of the query parameter support end up on the route? Is there something we should be doing to "future-proof" our design now?

Issue using Ember.set on Component property

I have a Component which receives a model attribute in some template:
{{#client-user-pipeline-step model=step tasks=step.tasks routeOnOpenAddTaskModal=(route-action "onOpenAddTaskModal")
routeOnOpenEditTextModal=(route-action "onOpenEditTextModal")}}
{{/client-user-pipeline-step}}
As per my understanding, this will be stored as an Ember.Object instance complete with property observers and stuff inside the component. Now when I try to change some property of the model by simply assigning a value to it I get this error:
You must use Ember.set() to set the `name` property (of [object Object])
Which is exactly what I expect as the property is being observed due to data binding. Now when I try to change the value using Ember.set like in this.getModel().set('name', name) ; I get this error:
this.getModel(...).set is not a function
Wow great! I couldn't find a precise explanation of how this data binding thing is supposed to work in the docs, so I'd appreciate if someone could enlighten me on the whole idea and this issue in particular. Thanks!
UPDATE:
The getModel() function is a shorthand for this.get('model').

Ember.js: accessing queryParams in before/afterModel hooks

The Ember.js docs indicate that queryParams should be passed into the before/afterModel hooks on a Route (http://emberjs.com/api/classes/Ember.Route.html#method_afterModel), but that argument is always undefined for me and I haven't been able to figure out why.
Here's an example: http://jsbin.com/xeyaxova/1/edit
Why is this argument undefined, and how else can I access the queryParams inside these hooks?
The query params must come after the hash, that's where your ember app does all of its routing.
#/?query=cxZxc
Example: http://jsbin.com/ucanam/3008#/?query=o
the beforeModel/afterModel hook aren't properly working right now (canary builds) Here's a workaround, the queryParam object is attached to the transition object.
http://emberjs.jsbin.com/giweqeze/1/edit

TypeError: 'undefined' is not an object (evaluating 'store.createRecord')

I have a 'new' action within a component (Ember.Component) that has the following code in it:
var store = this.get('store');
store.createRecord('child');
yet I'm getting the following error:
TypeError: 'undefined' is not an object (evaluating 'store.createRecord')
The only way I've been able to proceed with this is to find the parent object (always set in the component) by using:
store = this.get('parent.store');
and then proceeding with the createRecord call from above. Is this the "normal" way to proceed?
The store doesn't exist inside of a component, so either you need to pass it into the component, or you have to get it from some parent controller (or passed in controller).
Via Ember Data Transition document (https://github.com/emberjs/data/blob/master/TRANSITION.md)
In general, looking up models directly in a component is an anti-pattern, and you should prefer to pass in any model you need in the template that included the component.
The bad part about it, is you are adding a dependency to ember data in your component, which is supposed to be agnostic of the outside world.

How to linkTo a specific dynamic segment url in Ember.js?

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.