I recently wanted some routes in my emberjs app not to show up in the browser history and tried to leverage the replaceRoute functionality that was introduced in the RC1. Unfortunately it doesn't make any difference at all if I use transitionToRoute or replaceRoute.
Let's say I have 3 pages and I want page 1 to be skipped when going back in history.
App = Ember.Application.create({});
App.ApplicationRoute = Ember.Route.extend({
events: {goBack:function(){window.history.back();}}
});
App.Page1Controller = Ember.Controller.extend({
goToPage2: function(){
this.replaceRoute("page2")
}
});
App.Router.map(function() {
this.route("page1");
this.route("page2");
this.route("page3");
});
I've made a little JSFiddle example for testing http://jsfiddle.net/ripcurlx/Qmnrj/3/
Am I using the replaceRoute completely wrong, or is there a better solution to prevent certain routes not to be included in the browser history?
Thanks for any hints!
Unfortunately, this only works with location: "history". Browsers have no support for updating the hash without affecting history, whereas when using history states, there is the provided replaceState method which we can utilize.
Related
I am looking to upgrade Ember for a legacy application that I am supporting. The problem is that Ember's query parameter router is causing application conflicts because the legacy application uses an existing custom query string parser that was written before Ember's implementation was added.
Is there a way to completely disable the Ember query string router so that it will ignore ? characters in the URL? In a different situation I would simply switch to Ember's query string router, however that is not possible due to the constraints on this release.
Thanks!
Here is some of the relevant code:
App.Router.map(function() {
this.resource('search', { path: '/search/:query'});
});
App.SearchRoute = Ember.Route.extend({
model: function(urlParams) {
var queryObj = utils.parseQueryString(urlParams.query);
App.mainSearcher.setQuery(queryObj.q);
}
});
from this post it seems that sub directories within ember controller should work.
https://github.com/ember-cli/ember-cli/issues/1219
however its not working for me .
here is my code branch like (directory cm contains a child directory views):
/controllers/cm/views/item.js
/routes/cm/views/item.js
/templates/cm/views/item.js
when i try to populate the model in route using the code below i see the data but when i put the same code in controller it never gets executed.
model: function(){
return this.store.find('item',{id: "1"});
}
entry in router.js is as follows:
this.resource('cm', {path: '/cm/:id'} , function() {
this.route('views');
this.route('views.items', {path: '/views/items'});
});
Clearly ember is not able to resolve the controller correctly.
Not sure how to fix this ...
That its becuase the model hook in a route works differently than in the controller.
in a route it is a method that can return a promise, the route will wait for the promise to be resolved before setting up the controller.
in the controller, it is just an attribute, which won't get executed until you getit, and even then, all you will get its a promise.
Wat?! Subdirectories work just fine. First, I'm not sure it's the best idea to use views or items as route names, as they're both very generic, and also used in some of the ember internals and can confuse things. Declaring a model called View could very well even break things in your app.
The controller/route/template structures for your router.js will be as follows:
<controllers|routes|templates>/cm.js
<controllers|routes|templates>/cm/index.js
<controllers|routes|templates>/cm/views.js
And I'm not sure what views.items would look like, because this would probably be better suited to making views a resource instead, or using a dash in the name, in which case the route declaration would be this.route('views-items', {path: '/views/items'});
Overall, I think your router definition should look like so:
this.resource('cms', function() {
this.resource('cm', {path: '/:cm_id'}, function() {
this.route('views');
this.route('views-items', { path: '/views/items' });
});
});
This isn't meant to be a quip--I'm here to help--but I think you need to spend a little more time with Ember's routing documentation to understand the conventions that Ember is expecting for certain router definitions. Also, the ember inspector tool is a really great asset when debugging router issues: https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi
I have the following routing setup:
this.resource('blog',function(){
this.resource('selectimage',{path:"selectimage/:returncontext"},function(){});
});
this.resource('post',{path:":post_id"},function(){
this.resource('selectimage',{path:"selectimage/:returncontext"},function(){});
});
What I would have expected is, when navigating to blog.selectimage and post.selectimage, that the same router,controller and view would be used.
Unfortunately it seems that the last entry wins.
Is it possible to achievie this, without leaving the parent context(post/blog), when navigating to selectimage
(Obviously I could inherit from the base-selectimages-classes, but I'm hoping there is some generic ember way of doing this.)
You cannot have same resource name for two different routes as Ember relies more on naming conventions. But Ember provides ways to reuse the same controller and templates
Rename your selectimage under post to something else
this.resource('post',{path:":post_id"},function(){
this.resource('xxx',{path:"xxx/:returncontext"});
});
And in the router, you could specify the templateName and controller that has to be reused. Something like this should make it reusable
App.xxxRoute = Em.Route.extend({
controllerName: 'selectimage',
templateName: 'selectimage'
});
Sample Demo
I'm a newbie to Ember Data and I've just switched from FIXTURE data to the RESTAdapter but I don't know enough about how to connect the model and the API's call signature. Specifically I'd like to be able to call an endpoint GET /activities/[:user_id]/[:by_date]. This would load an array of "Activity" objects but only those for a given date.
Router:
this.resource('activities', { path: '/activities' }, function() {
this.route('by_date', {path: '/:user_id/:by_date'});
});
Route:
App.ActivitiesByDateRoute = Ember.Route.extend({
serialize: function(activity) {
return {
userId: 1,
dateBy: "2013-07-01"
};
}
});
First off I tried to hard code the values for userId and dateBy making the adjustments to the Route above. Sadly that did not work. I think I understand why -- although I don't have a quick way to fix this -- but more disturbing for me was that when I manually put in the parameters into the URL: http://restful.service.com/api/activities/1/2013-07-01. The results are quite surprising to me:
Initially the debugging messages suggest a success:
This however, is not correct as no network requests are actually made
If you reload the browser, it will now go out and get the Activities but to my surprise it also goes out to find the specified user. Hmmm. That's ok, the user 1 is pulled back successfully.
The Activity, however, is just a GET /activities call which fails because this endpoint needs the user and date qualifier to work. Why weren't these included in the request?
I don't think ember data supports "composite keys" (which is essentially what you are trying to do). You'd probably need to build your own Ajax for that specific model and implement it in the model hook for that specific route. You can always fetch the data and sideload it into ember-data if you'd like to have an ember data model.
I've tried to follow along with the Ember cast video:
http://www.embercasts.com/episodes/getting-started-with-ember-model
I originally tried with the latest handlebars rc4 and ember rc6 but was receiving this error:Ember.Adapter subclasses must implement findAll
It doesn't make much sense because I can see the findAll method implementation defined in the fixture adapter source code. I tried debugging the app.js to check the App.Person.adapter but with all the gets and wrappers for mixins it wasn't very helpful.
Then I downloaded the source code from the video directly and opened the index.html in the browser and still have the same error. This was really strange since the code obviously worked for the video.
Anyways, I tried to make a jsFiddle here:
http://jsfiddle.net/YCG9b/1/
to see if someone could point out what I expect to be a trivial mistake somewhere.
jsFiddle didn't like loading ember-model.js from github so I pasted the whole thing into the JS section.
There is so little going on here that it seems this is likely an incompatibility between versions of libraries, some environmental thing, or a silly syntax error somewhere.
My understanding is that this line App.Person.adpater = Ember.FixtureAdapter.create(); somehow isn't actually putting an adapter with a findAll method on the person model, so the subsequent call of App.Person.find() is failing.
Quite embarrassing, but I misspelled adapter...
I even quoted the line of code that had the error. :(
App.Person.adapter = Ember.FixtureAdapter.create();
Anyways, here is the updated fiddle if anyone else finds this in the future:
http://jsfiddle.net/YCG9b/3/
It looks like you're mixing up Ember Model with Ember Data (they both fill the same model void). Ember data is provided by the ember core team, ember model is by Erik Bryn who also commits regularly to Ember. They are both really good.
Ember Data requires a store, and you use DS.attr and DS.Model.extend etc...
BTW, cdnjs has a ember data if you want to link it to your jsfiddle.
Here it is fixed up: http://jsfiddle.net/PX5DV/
App.Store = DS.Store.extend({
revision: 13,
adapter: DS.FixtureAdapter.create()
});
App.Person = DS.Model.extend({
id: DS.attr(),
name: DS.attr()
});