Hi I am following through with Plural sight course "Getting started with Ember 2"; I am stuck with this error: 'Ember' is not defined no-undef;
my code looks like this ember dot dollar sign dot get json two brackets; this is inside route ; the code works fine with static data. I am sorry the editor would not allow me to paste my code
Update:
Right way and best practice is to import Ember like this import Ember from "ember";
This is just lint error. you can add an exception for Ember. In .eslintrc.js file you can add
"globals": { "Ember": true }
Or if you dont want this rule be enabled then you can turn it off
rules: {
"no-unused-vars": "off"
}
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?
Am quite new to emberjs and ember-cli.
And I have always been wondering how a statement like this works:
import Ember from 'ember'
Does 'ember build' look up for 'ember' in node_modules?
I understand statements like this with relative paths:
import ENV from './config/environment'
but not the ones referred without a path.
This question raises in connection with Could not find module ember-validations, in an effort to find its root cause.
The sort answer is that Ember-CLI registers the global objects directly with the module system. Take a look at the code here. While it's wrapped in a little helper code, they essentially do this:
define('ember', [], function() {
return {
'default': window.Ember,
};
});
Then, Ember-CLI converts your import statement during compilation:
import Ember from 'ember';
Gets converted to:
var Ember = require('ember')['default'];
Keep in mind that this is how it's done when using a transpiler to use AMD modules. I'm not 100% sure how that code would work if we were using a native ES6 implementation, although I know that the syntax supports this kind of thing.
So, I've been trying to qunit test an Ember controller, The problem is, The controller is inside a coffeeScript file, that contains multiple controllers.
Now, The ember testing guide says, In order to test a controller, I should use the 'moduleFor' helper like so:
moduleFor(fullName [, description [, callbacks]])
In my case, the full name is say: "CustomersIndexController" , But because it's included in "customers_controller.coffee" that in it self includes multiple controller, Testing it became problematic .
After an Endless digging online, I found out (Please correct me if I'm wrong) that the resolver cares only about the file name, not about the name that 'export default myModel' provides
To make it more clear, Here is my "customers_controller.coffee" :
`export { CustomersIndexController, CustomersItemController }`
CustomersIndexController = Ember.ArrayController.extend
#Code goes here ......
CustomerItemController = Ember.ObjectController.extend
#Code goes here .....
And here is the customers-controller-test.coffee file :
`import { test, moduleFor } from 'ember-qunit';`
moduleFor("controller:customers-index-controller", 'C Controller')
test "it's an App.Controller", -> ok(#subject())
I've tried all the ideas that my brain could produce...without any luck(changing the controller name from camelCase to dasherized, to absolute path, even tried importing customers_controller.coffee), But I keep getting:
Setup failed on it's a App.Controller: Attempting to register an unknown factory: `controller:customers-index-controller`
Any Help/Advice/Links are highly appreciated.
You should be able to defined it in lower camelCase.
moduleFor('controller:postsIndex', 'Posts Index Controller');
http://jsbin.com/ruhalota/1/edit
If you take a look at the documentation for the resolver with ember-cli, you'll see that it does indeed only care about the names of the files, and what is the default export of them: http://www.ember-cli.com/#using-modules
In your case, you'll need to split your controllers into multiple files, so the resolver can find and instantiate them properly. So, the two files would be:
app/controllers/customers/index.coffee
app/controllers/customers/item.coffee
This is all assuming you are using ember-cli. If you are still using ember-app-kit, you might need to adjust this slightly, but the same basic idea should apply.
I'm trying to reproduce Ember-TodoMVC with ember-cli. I'm stuck with this part.
I've created a view like this:
app/views/action-edit.coffee
ActionEditView = Ember.TextField.extend
didInsertElement: -> #$().focus()
`export default ActionEditView`
When i use it in an Emblem template directly, e. g. view "action-view", it works fine: a text field is rendered.
But emberjs.com/guides suggests creating a helper to render the view.
I found this remark: "Remember that you must register your helpers by exporting makeBoundHelper" on ember-cli website. After fiddling for a while struggling to understand how ES6 modules work, i ended up with this code that does not produce any JS errors:
app/helpers/action-edit.coffee
`import ActionEditView from 'loltodo/views/action-edit'`
`export default Ember.Handlebars.makeBoundHelper(ActionEditView)`
When i use it like this in an Emblem template: action-edit, Ember outputs this in browser console:
[✓] helper:action-edit ......................................... loltodo/helpers/action-edit vendor/ember/ember.js:3521
So i assume the helper gets hooked up fine.
The problem is that it renders blank!
I also tried this:
app/helpers/action-edit.coffee
`import ActionEditView from 'loltodo/views/action-edit'`
`export default Ember.Handlebars.helper('action-edit', ActionEditView)`
It results in error "undefined is not a function" in this line.
So the question is: how do i create a helper that render a view with ember-cli to reproduce this step of the Ember-TodoMVC tutorial?
Like Stefan says: the docs describe this so here are the steps:
from command prompt run ember generate helper "luis-highlight"
make sure your helper name has a dash.. ember-cli does not want
conflict with html tags (if no dash then it does not work).
inside helpers/luis-hightlight.js write this:
import Ember from 'ember';
export default Ember.Handlebars.makeBoundHelper(function(value) {
return new Ember.Handlebars.SafeString('<span class="hightlitht">' + value + '</span>');
});
call helper from template:
{{luis-hightlight 'embercli is great'}}
consider looking at: https://github.com/WMeldon/ember-cli-todos/blob/master/app/components/edit-todo.js it should have an idiomatic ember-cli todo setup
I'm trying to use moment.js in my ember.js app (built with ember-cli), I have a trouble with this error
Handlebars error: Could not find property 'formatDate' on object
I think it's same as this error How to use Custom helpers in ember-app-kit? but I already did the same approach but not working yet. Anyone got same error? Please help me to figure out.
I put
app.import('vendor/momentjs/moment.js'); in Brocfile.js
and
"moment": true in .jshintrc as in ember-cli documentation,
and I used the helper {{formatDate date}} in PostsTemplate
I created a helper app/helpers/formatDate.js
var formatDate = Ember.Handlebars.makeBoundHelper(function(date) {
return moment(date).fromNow();
});
export default formatDate;
I also tried this syntax in app/helpers/formatDate.js, but neither works and both get same error
export default Ember.Handlebars.registerBoundHelper('formatDate',function(date) {
return moment(date).fromNow();
});
I think your file name 'formatDate.js' has the wrong format. Try 'format-date.js' and it should work.
Excerpt from http://iamstef.net/ember-cli/:
Handlebars helpers will only be found automatically by the resolver if their name contains a dash (reverse-word, translate-text, etc.) This is the result of a choice that was made in Ember, to help both disambiguate properties from helpers, and to mitigate the performance hit of helper resolution for all bindings.
Use your new 'format-date' helper like this:
{{format-date "29/05/2014"}}
I ran into this symptom as well and had a different solution.
I had a helper in app/helpers/fh.js called 'fh' in order to be able to use it I needed to add it to the controller as follows
import fh from '../helpers/fh';
If I didn't have the import line I would get the following error:
"Handlebars error: Could not find property 'fh' on object"