I am learning Ember and have been watching the Microsoft videos at the following URL. https://mva.microsoft.com/en-us/training-courses/creating-web-applications-with-ember-15692?l=0mGK6g00B_7405244527
I was making good progress until the generated Models and ended up with import DS from and then I read a post and found out that is the new behavior. I was able to modify the model code accordingly and get mine to work. Phew...
I then hit around 7:00 into the above video when they start to implement Ember-localstorage-adapter and the Git instructions are completely different than whats on Git today even though the version is the same. I only have the two models and when I look at the git page for the adapter I see this:
// app/serializers/application.js
import { LSSerializer } from 'ember-localstorage-adapter';
export default LSSerializer.extend();
// app/adapters/application.js
import LSAdapter from 'ember-localstorage-adapter';
export default LSAdapter.extend({
namespace: 'yournamespace'
});
I don't have app/serializers or adapters so I'm totally lost.
I'm really hoping I don't have to abort this video as there aren't really any other up-to-date videos out there on Ember. I've tried a bunch of others and they were dated or ill-suited for a beginner such as myself.
Thanks for the help!
I don't have app/serializers or adapters so I'm totally lost.
Just generate them using:
ember g serializer application
ember g adapter application
And then copy content from whatever page you check to see if everything's up to date to these files.
Related
I am trying to import a simple node js module into Ember js. I followed the quick start at https://guides.emberjs.com/v3.8.0/getting-started/quick-start/ and got the People List working.
Then I added the simple upper-case module using npm install upper-case and added app.import('node_modules/upper-case/upper-case.js'); to ember-cli-build.js as mentioned in https://guides.emberjs.com/release/addons-and-dependencies/managing-dependencies/.
After that, I opened scientists.js and added import to upper-case as follows:
import Route from '#ember/routing/route';
//import uc from 'upper-case';
export default Route.extend({
model() {
var arr = new Array();
arr[0] = 'Marie Curie'; // uc('Marie Curie');
arr[1] = 'Mae Jemison';
arr[2] = 'Albert Hofmann';
return arr;
}
});
If I remove the comments, it shows me a blank screen. If I use 'Marie Curie'.toUpperCase() it works, but I want to be able to import such node modules. How can I achieve this?
I have already tried exception while importing module in ember js and ember-auto-import, but they don't seem to work for me. The above method I tried seems to be simple and would be nice if it can work this way.
PS: I could make upper-case work in other JS frameworks such as React and Vue, so the module itself doesn't have any issues.
if you install ember-auto-import, you'll be able to use any npm package like how the particular npm package's documentation says to use it (provided the particular npm package is configured correctly on build).
https://github.com/ef4/ember-auto-import
This'll be a default soon (and is recommended over using app.import)
The reason ember-auto-import is recommended over app.import is because there are ~ 5 different module formats JS can exist in, and you need to worry about those when using app.import. ember-auto-import, powered by webpack, abstracts all that away from you.
fwiw, JS has .toUpperCase() built in: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
so you don't need that particular module.
Edit
I have already tried exception while importing module in ember js and ember-auto-import, but they don't seem to work for me. The above method I tried seems to be simple and would be nice if it can work this way.
did you get any errors with this?
I'm developing an Ember-JS application with a lot of JavaScript that performs of all kind of UX and styling tasks.
Because these tasks fall out of the scope the MVC-logic, I've put them into modules that I put in the vendor map.
Putting them into the Vendor folder doesn't mean I'm done tweaking these files, but to test them, I'm required to re-start the ember-server over and over again.
How can I make Ember watch these JS-files in my vendor folder and re-compile them when I change them?
The following page answers for Ember v. 1, but doesn't apply to Ember 2.0: https://discuss.emberjs.com/t/solved-watch-addon-directory-for-changes/6410/4
I also tried creating an addon, but ember (cli) answers with: “You cannot use the addon command inside an ember-cli project.”
It took me a while to connect all the pieces of information scattered over internet, but using #Lux 's anwers, this is what I found out.
1) Using the ember-cli, I generate a 'utility' (hence the utils folder):
ember g util grid-layout
This gives you a JS-file “app/utils/grid-layout.js” template to fill in. In my case, it was a matter of…
2) copy-paste the body of the function I created earlier, into the body of the function that ember-cli came up with:
export default function gridLayout(tree) {
…
return tree
}
3) Importing the function in the controller, in my case controllers/index.js. I found different examples on how to do this, with and without curly braces and using different paths to the module file, but this is what made it work for me:
import Ember from "ember";
import gridLayout from "../utils/grid-layout";
export default Ember.Controller.extend({…
Links:
https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/export
https://blog.abuiles.com/blog/2014/10/03/working-with-javascript-plugins-in-ember-cli/
In ember-cli version 2.11.0 by default its watching vendor foler.
https://github.com/ember-cli/ember-cli/pull/6436
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've been trying to implement a router as specified in this guide, but I can't make it work. Can anyone give a quick code sample using the latest version of Ember to enable a router that supports routing through urls?
Here is a one with ember latest, still prone to changes :)
http://jsfiddle.net/C7LrM/86/ posted by #mediastuttgart
The comments section of this Gist by wycats looks like the place where you can get updated fiddles :) https://gist.github.com/2728699#comments
This example uses:
handlebars-1.0.0.beta.6.js
Ember latest as of now:
// Version: v0.9.8.1-484-g73ac0a4
// Last commit: 73ac0a4 (2012-07-06 11:52:32 -0700)
For documentation of present code under development please go to ember source where they have documentation alongside code,
Eg: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/router.js
https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/ in general