I created a small app that takes a search query and returns mock content. You can see the app here: http://embersherpa.com/wip/search-example/app/#/search
It work correctly when entering the query via the search but not via the url.
How do I correctly handle search queries with "/" when entered via url?
You should probably not put your keyword directly into the URL. Instead escape it first with encodeURIComponent and unescape it with decodeURIComponent in your model hook. The rough code look like this:
serialize : function(model){
// model is the keyword in your case
return {keyword: encodeURIComponent(model)};
},
model : function(params){
var keyword = decodeURIComponent(params.keyword);
// do what you need to do with the keyword
}
Related
The models tree of my emberJS app match the tree of my API however, I have 2 different routes returning the same type of data :
/products/ and /users/:id/supported_products/ both return products data.
When I need to have the products of the app there is no problem :
this.store.query('product',params);
However I am not sure how to query products from the user path. The place to do so would be the adapter, but I need to define a secondary adapter that I would call when I need supported products,and I have no idea how to do so.
I think if it were me I would create a virtual query parameter that would instruct a custom adapter on how to change the endpoint on the fly.
For example I might have a supportedByUser flag. Then in my app/adapters/product.js do something like this:
import JSONAPIAdapter from 'ember-data/adapters/json-api';
export default JSONAPIAdapter.extend({
urlForQuery(query, modelName) {
let userId = query.supportedByUser;
delete query.supportedByUser;
return userId
? `${this.namespace || ''}/users/${userId}/supported_products`
: this._super(...arguments);
}
});
Here is an example twiddle demoing this: https://ember-twiddle.com/b406391e98ed4fda30bc227a894fa7c9
Background: The user can filter a list based on tags, every tag is an Ember Data model. The selected filtering tags should be stored in the URL via query parameters. I also want to display the selected tags in the interface.
What's the best way to go about this?
I'm pretty sure I only want to store the IDs, but if I do this I have to maintain a separate variable / computed property where I store the actual record of the ID which comes from the query parameters. This kind of duplication seems wrong to me.
Apart from this issue I don't know if I should use an array query parameter or build an comma separated string of the IDs. If I do the former I end up with ugly URLs like ?tags=%5B"3"%5D. But doing the later means doing even more work.
So what's your approach to this kind of problem? I hope I'm missing something obvious that doesn't have so many downsides :)
Easy!
Find out which non-alphanumeric characters are not getting encoded in URLs. Using this tool, I found these characters: ~!*()_-.
Pick one character that is not used in your tag names. Let's say it's *. Use it as a delimiter.
Use tag names for tag ids. Or at least enforce unique tag names.
Then you've got a nice readable query:
?tags=foo*bar*baz&search=quux
To implement custom query param serialization/deserialization, do this:
Ember.Route.reopen({
serializeQueryParam: function(value, urlKey, defaultValueType) {
if (defaultValueType === 'array') {
return `${value.join('*')}`;
}
return this._super(...arguments);
},
deserializeQueryParam: function(value, urlKey, defaultValueType) {
if (defaultValueType === 'array') {
return value.split('*');
}
return this._super(...arguments);
}
});
Demo: app, code.
If you must use numeric tag ids in query params (for example, your tag names aren't unique), then you need some more customization: app, code.
In my Ember.js Application, I am dealing with query params for list updates. I have one strange use case, in which I don’t the URL to be updated with certain query params. How can I achieve this?
I assume you want to reload your model with parameters that are different than the ones in your application route? And you keep your application route parameters synced using queryParams?
In your route's model function you can filter your model data by the same query params (that appear in the address bar) but you can add some logic that extracts additional parameters either from the controller or other place and these parameters the data fetching query. Example:
model: function(queryParams) {
var params = queryParams;
params.additional_filter = this.controllerFor('mycontroller').get('additional_filter');
return this.store.find('mymodel', params);
}
Also if you want to explicitly reload the model you will need to call Router.refresh() function.
Is there currently (in the latest builds) a way of specifying a URL on a model-by-model basis? in Ember Data 1.0 beta? I have found some questions on SO and issues on Github around this, but most are out-dated.
For example, I have a model that's called App.PaymentSearchResult and rather than having the request go to /payment_search_results I would like it to go to /payments/search. Where would I override the URL used for a given model (rather than overriding buildURL on the RESTAdapter)?
You can override the the find adapter
but it's kind of hackish, i think however i would take another approach. Idealy you want your Ember models to reflect your backend's models, so why would you need a PaymentSearchResult? When you probably already have a Payment model?
If you need to search in your payment records, why not handle it using query params?
http://emberjs.com/guides/models/finding-records/#toc_querying-for-records
this.store.find('payment', { total: "22" });
Then you want to answer accordingly on the server.
If you want to do a search which returns multiple models, you do this with a manual ajax request.
var self = this;
$.get( "/search", { name: "John", time: "2pm" }, function(result) {
self.store.pushMany(result);
});
PushMany assumes a sane JSON structure.
http://emberjs.com/api/data/classes/DS.Store.html#method_pushMany
In using Ember Data for my models, there are some cases where I need to work around the data limitations and access other quasi-restful URLs on my server.
For example, I have a Feed object that records a stream of data. For accessing the models I have a RESTful endpoint:
/feeds/:feed_id
In order to start and stop recording a feed, I need to send a PATCH to a url like:
/feeds/:feed_id?update_action=start
Subsequently I can reload my model and see the changes reflected therein.
In this case, I need to access $.ajax and the URL is the same as the one Ember would use. However, I can't figure out how to eke this information out of Ember.
So far, the best I can do is:
DS.Model.reopen
rootForModel: Ember.computed( ->
#.store.adapterForType(#).serializer.rootForType(#.constructor)
)
pluralRootForModel: Ember.computed( ->
#.store.adapterForType(#).serializer.pluralize(#get("rootForModel"))
)
Such that for an instance of App.FeedItem I can do:
this.get("rootForModel") # feed_item
this.get("pluralRootForModel") # feed_items
And I'm guessing this would stay in sync with any settings made in the Adapter etc.
Subsequently, I can call like:
$.ajax
url: #get("pluralRootForModel") + "/" + #get("id")
data:
update_action: "start"
type: "PATCH"
Is this totally out in left field? Is there a more direct way to compose these URLs?
Another (related issue) is getting the underscored name for a given model.
App.MyModelController => my_model_controller
I've done something like:
Ember.Object.reopenClass
###*
* The underscored name for this.
* i.e. App.MyClass -> my_class
* From an instance, use this.constructor.underscored_class_name()
* #return {String} This classname, underscored.
###
underscored_class_name: ->
_.underscored("#{#}".replace(/^.*?\./g, ""))
Is this crazy? Are there any better ways?
Check out buildURL in DS.RESTAdapter.
If you want to use underscores in server paths and keys, check out DS.ActiveModelAdapter (and its default serializer, DS.ActiveModelSerializer). This adapter has its own implementation of buildURL.