I have seen an answer to this question and was directed to the Ember API Docs for using the browser's history.pushState ability
Apparently I need to add this code to my router.js file
App.Router.reopen({
location: 'auto'
});
However, doing so breaks my app! It is a very simple app so far, since I am still only learning... so its basically just a default installation with only 4 templates, 4 routes. I am using Ember App Kit which, I noticed initializes the router slightly differently than the ember guides describes.
Is there something different I need to do? or is there something I am doing wrong in general?
Ok... I found the answer, for anyone who might run into this same issue.
Ember app kit seems to define the router in a variable just called Router, so I don't need to use the conventional naming requirements.
All that needs to be added to the router.js is this:
Router.reopen({
location: 'auto'
});
:D
Related
I have an Ember Addon which I've put up at Github here:
https://github.com/lifegadget/ember-dictionary
It passes all its unit tests and in a non addon form it is working fine in one of my projects but I'd like to lift it out the project and be able to use it as an addon. Still I'm clearly missing a step in how to expose the two Ember classes. This can be seen in the dummy app which tries to create a very simple model like so:
import DS from 'ember-data';
import DictionaryModel from 'ember-dictionary';
export default DictionaryModel.extend({
foo: DS.attr('string')
});
Then when the route (tests/dummy/routes/index.js) tries to use the model I get the following error:
Error while processing route: index Cannot read property 'extend' of undefined TypeError: Cannot read property 'extend' of undefined
To me this feels like a ES6/namespacing issue but I'm not sure how to overcome it. I did try the following more explicit import statement:
import DictionaryModel from 'ember-dictionary/models/dictionary-model';
but the same error occurred. Any help would be greatly appreciated.
I have bumped into enough walls that I think I can at least partially answer my question but some questions still remain so I won't mark this answer correct with the hope that others may post a more complete answer.
The first distinction I realised I hadn't been making clear enough for myself was whether to target the Ember App's namespace or to target an independent namespace for the addon. Classes defined in the app directory of the addon will be available to any application which uses the Addon in it's own namespace. In contrast, classes in the addon directory will be namespaced to the addon's namespace.
I have seen a lot people define classes in the addon's app directory and then proxy it through to the addon directory with something like:
// addon/mixins/dictionary.js
import DictionaryMixin from 'ember-dictionary/mixins/dictionary';
export default DictionaryMixin;
Although I've seen this I am still having problems getting these external namespaced classes to work. I think there may be another step needed to add a index.js entry point for the addon and then export these classes there. In any event, I'll leave this area alone as I decided to get the internal namespaced solution working first.
My next problem in the internal namespaced solution was centered around the dummy application that gets built as part of the addon creation process. I wanted this dummy application to have a model which would use the Mixin I created in the addon and I thought I'd be able to refer to it as:
import DictionaryMixin from 'ember-dictionary/mixins/dictionary';
but this couldn't be resolved by the Dummy test application so I had to resort to:
import DictionaryMixin from '../mixins/dictionary';
Which I guess is appropriate considering that my "external namespaced solution" isn't working yet ... falling back to the internally namespaced solution was required.
I have started with ember and ember-cli. Ember-cli is somewhat different than Ember shown in most of the tutorials.
I can not understand what do I need to do to inherit my own custom "Route".
For example I made a file:
authenticated.coffee
and in it:
AuthenticatedRoute = Ember.Route.extend
Now I want to do the following:
make a new file called secret.coffee with:
SacretRoute = AuthenticatedRoute.extend
The best I got so far is import AuthenticatedRoute from '../routes/authenticated' which says that it included the file but says that it can not do .extend on undefined.
I do not quite understand it and I have googled all around so please if there is an answer somewhere please you can politely give me a link.
Thank you.
I am not familiar with coffee script but have you may have forgotten to export AuthenticaedRoute.
And also suggestion from stefanpenner who is creator of ember-cli. Don't hold reference of your extended route or controller just export it as
export default Ember.Route.extend();
I am typically searching for answers here but I finlly gotten to the point where I can't find a good answer.
I am looking to build an ember app which only initially loads in the things that it needs just to start and open the main route. All other controllers, views, templates, etc. Would be loaded lazily when a specific route gets triggered.
I have found a good example of how to accomplIsh this here:
http://madhatted.com/2013/6/29/lazy-loading-with-ember
My main question is to determine what build tools out there support this theory of lazy loading application code? So far, I've seen that Brunch, Yeoman, and Ember App Kit seemed to minify and concatenate all the scripts and templates. I am very happy with minification but need those files separate. I have thought about just putting this code into the app/assets location so that it gets copied over without concat but it does not get minified.
Does anyone have a solution? Thanks!
You can do this with brunch by adding the following to your brunch config
files: {
javascripts: {
joinTo: {
'javascripts/app.js': /^app(\/|\\)(?!admin)/, // concat everything in app, except /app/admin
'javascripts/vendor.js': /^vendor/,
'javascripts/admin.js': /^app(\/|\\)admin/ // concat only /app/admin
}
}
}
Grunt (used in yeoman and ember app kit) is ridiculously flexible, so I'm sure you can set up the same thing there by diving into Gruntfile.js
The question was: "I am looking to build an ember app which only initially loads in the things that it needs just to start and open the main route. All other controllers, views, templates, etc. Would be loaded lazily when a specific route gets triggered.".
Ember expects to have anything it needs right there when the page gets loaded. I wouldn't be wrong, but lazy loading of routes doesn't seem to be a feature of Ember. Ember CLI is the same. It uses bundling and minification to reduce the overload. But everything should be there to make it work.
Instead, people like me would like to load things only when they are required.
When you try to implement lazy loading in Ember, everything should be represented by a module (file.js): a route, a module; a controller, a module; and so on.
You should follow a schema (like POD), to which apply a mechanism to find things where they are supposed to be.
Every module should know its dependencies. But some of them are very frequent (route, controller, template).
You should use a module loader for the browser. It can be requirejs or whatever you like. But ES6 is at the door. Let's think about that.
Many people use beforeModel hook to achieve a result. I did it, and it works, if you don't use link-to component. Otherwise everything crashes. Why? Because of href computed property. When a link-to has been inserted, an href is calculated for it. Because of that, Ember looks for the route where the link points to. If the route doesn't exist, one is created from route:basic.
A solution could be the preloading of all the routes represented by all link-tos inserted in the page. Too much expensive!
An integration to this answer can be found at Lazy loading route definitions in Ember.js
For an initial solution to lazy loading of routes organized in POD, have a look at https://github.com/ricottatosta/ember-wiz. It is an ES6 based approach, which relay on SystemJS as module loader.
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()
});
I'm just getting started with Ember. I'm a little confused on some things, as the guides on the main site seem to indicate different ways of working.
In the main docs (http://emberjs.com/documentation/), it indicates that a controller should just extend an ordinary Ember object like this:
Ember.Object.extend();
Which works fine for me.
Then in the guide to using Routing (http://emberjs.com/guides/outlets/) it suggests that there is a Controller object type that you can extend:
Ember.Controller.extend();
This doesn't work for me, and if I simply try to console.log Ember.Controller, its undefined.
I'm using Ember version 0.9.8.1.
Should I worry about this, or should I just carry on with extending Objects as my controllers?
0.9.8.1 is aging, and unfortunately even the guides on the site are ahead of it -- use latest (at https://github.com/emberjs/ember.js/downloads) to keep up with the most current best practices.
Update: 1.0-pre is out (emberjs.com), so that is the best to use. The docs / guides have been brought up to date.
I think #pauldechov means the specific "latest" build which you can find here: https://github.com/emberjs/ember.js/downloads
But also keep in mind that the documentation and "latest" are not always in sync.