I have been trying to get the moment.js library to work with an Ember application using the Ember-cli. Note I am fairly new to ES2015.
Ember 2.2.0
Ember-cli 1.13.13
my ember-cli-build
/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
//options
});
app.import('bower_components/moment/moment.js');
return app.toTree();
};
and my .jshintrc
"predef": [
"document",
"window",
"-Promise",
"moment"
],
and my controller
/* global moment:true */
import Ember from 'ember';
export default Ember.Controller.extend({
firstName: null,
lastName: null,
day: function () {
return moment('Dec 25, 1995');
}.property()
});
I always get an error that 'moment' has not been defined. I read that the latest moment.js has stopped producing a global 'moment' but I'm not sure what to do about it.
The builds work. If I pull up the generated vendor.js I can see the complete contents of the moment.js file in it. However when I look at vendor.js in the chrome debugger the contents are omitted. I wasn't sure if this was due to some optimization.
the best way to install moment.js in ember app is to use ember moment addon
after installing it you will be able to use it as
import moment from 'moment';
plus you will get various helpers
Related
I have created an ember app with a component, and I am trying to figure out how I can load a external JS file that is stored in the vendor dir of the app within the component. The code for the component looks like the following,
// app/components/bubbles-page.js
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement: function() {
// this.$() is a scoped selector to the current view
// bubbles();
// window.onload = bubbles();
// the below line gives the following error,
this.$().bubbles();
// ERROR
//TypeError: this.$(...).bubbles is not a function
// END ERROR
}
});
And the ember-cli-build.js looks like the following,
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
//
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import( app.bowerDirectory + '/d3/d3.min.js');
app.import('vendor/bubbles.js');
return app.toTree();
};
Your ember-cli-build.js seems ok.
As for your component file, you can use Ember.run.scheduleOnce('afterRender', callback) to wait for the DOM to render and then call your jQuery plugin.
Also, normally with jQuery plugins, you would have to pass a jQuery selector with which to call the function.
Try the following:
// app/components/bubbles-page.js
import Ember from 'ember';
export default Ember.Component.extend({
didRender() {
this.$('.my-bubbles-container').bubbles();
}
});
Replace .my-bubbles-container with your jQuery selector. I am not familiar with the jQuery plugin you're trying to use but normally that's how jQuery plugins would be used.
You can read more about how to initialize a jQuery component on [this blog post][1].
Updated answer
After learning that your bubbles.js file wasn't a jQuery plugin and that it was a function that operates on the global window, you can call it like this:
// app/components/bubbles-page.js
import Ember from 'ember';
export default Ember.Component.extend({
didRender() {
bubbles();
}
});
If your function is a global function, you will need to add /* global bubbles */ to your component file, or add bubbles to the predef array in the .jshintrc file to avoid the JSHint errors.
This might be a silly question but did you restart your ember serve after adding the import to ember-cli-build? Changes to the Brocfile or ember-cli-build won’t be picked up until you restart.
Another thing you could try is to add { type: 'vendor'} to your import statement: app.import('vendor/bubbles.js', {type: 'vendor'});
First, I made a small Ember app without Ember CLI.
I had this piece of code.
window.MyApp = Ember.Application.create({
ready: function() {
this.register('session:current', MyApp.SessionController, { singleton: true });
this.inject('controller', 'session', 'session:current');
}
});
This worked.
Then I decided to rewrite everything from scratch with Ember CLI.
I edited the file app/app.js and added the ready hook just like in my previous version.
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver,
ready: function() {
this.register('session:current', App.SessionController, { singleton: true });
this.inject('controller', 'session', 'session:current');
}
});
This doesn't work.
The session controller does exist. That's the content of the file app/controllers/session.js
export default Ember.Controller.extend({
isLoggedIn: false,
});
The error message I get is
TypeError: Attempting to register an unknown factory: `session:current`
It appears in the browser.
I googled that message, but I found nothing about dependency injection in Ember CLI.
Any idea?
In ember-cli you can use ember generate service <name of service> and ember generate initializer <name of initializer> to build the stubs to achieve this, which is far better than fiddling about with app.js.
You create a service basically like this:
// app/services/notifications.js
import Ember from 'ember';
export default Ember.Object.extend({
initNotifications: function() {
// setup comes here
}.on('init'),
// Implementation snipped, not relevant to the answer.
});
And the initializer, which injects the service into the component(s) of your application which need it:
// app/initializers/notifications-service.js
import Notifications from '../services/notifications';
export default {
name: 'notification-service',
after: 'auth-service',
initialize: function( container, app ) {
app.register( 'notifications:main', Notifications, { singleton: true } );
app.inject( 'component:system-notifications', 'notificationService', 'service:notifications' );
app.inject( 'service:auth', 'notificationService', 'service:notifications' );
}
};
With that, it becomes available as notificationService on the components specified.
Documentation on the subject of dependency injection in Ember can be found at http://emberjs.com/guides/understanding-ember/dependency-injection-and-service-lookup/
I have imported moment.js into my project and it seems to work just fine in my controllers but for some reason it is not working in my routes.
Controller:
// controllers/users.js
import Ember from 'ember';
export default Ember.Controller.extend({
date: function() {
alert(moment().format('X'));
}.property()
...
});
Route:
// routes/users.js
// (Error: /routes/users.js: line 5, col 29, 'moment' is not defined.
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
var data = { start: moment().startOf('month').startOf('day').format('X') };
return this.store.find('event', data);
}
});
Brocfile:
var app = new EmberApp();
app.import('vendor/moment/moment.js');
I guess this is a JsHint Error. You may want to add the following comment to your Route code.
/* global moment:true */
import Ember from "ember";
....
Also (from ember-cli documentation):
If you want to use external libraries that write to a global namespace (e.g. moment.js), you need to add those to the predef section of your project’s .jshintrc file and set its value to true. If you use the lib in tests, need to add it to your tests/.jshintrc file, too.
Then you don't have to do it to every file your using moment.js in.
I usually use Rails for my Ember apps. However this time we opted to decouple the API from the Ember app, and as such I'm trying EmberCLI. So far it's lovely to setup and use. However when using attempting to use fixtures it doesn't load the data.
As listed in this post I am using reopenClass when declaring the fixtures.
If I do not override the model, it does not error but the Ember inspector also shows no data was loaded. If I override my file with:
// routes/campaigns/index.js
export default Ember.Route.extend({
model: function() {
return this.store.find('campaign');
}
});
And visit the /campaigns path then I get the error I get the error Error while loading route: undefined.
From what I can find this seems to happen when Ember cannot find the data.
My router and model with obvious items like export default excluded:
// app/router.js
Router.map(function() {
this.resource('campaigns', function() {
});
});
// models/campaign.js
var Campaign = DS.Model.extend({
name: DS.attr('string')
});
Campaign.reopenClass({
FIXTURES: [
{ "id": 1, "name": "Campaign #1" },
{ "id": 2, "name": "Campaign #2" }
]
});
I have tested the same setup in a Rails app I just made, and it works perfectly. I'd love any insight people could give, as EmberCLI seems lightweight and worth the effort.
Edit: Adding my app.js file to answer question about whether I included DS.FixtureAdapter:
// Import statements
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'nala', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'nala');
App.ApplicationAdapter = DS.FixtureAdapter({});
export default App;
You need to set up your application adapter located at the filepath adapters/application.js as follows:
export default DS.FixtureAdapter.extend({});
See the first paragraph under ember-cli Naming Conventions. N.B. you won't need to import DS or Ember if you're using ember-cli and have them listed in your .jshintrc file.
I'm trying to start a new project with ember app kit and ember data using ES6. I've managed to create a store using the following code in adapter.js
var ApplicationAdapter = DS.FixtureAdapter.extend();
export default ApplicationAdapter;
However, I'm failing to create a model and access it. In models/account.js I have this
var Account = DS.Model.extend({
name: DS.attr('string')
});
Account.FIXTURES = [
{
'id': 1,
'name': 'Acc 1'
}, {
'id': 2,
'name': 'Acc 2'
}
]
export default Account;
and in my routes/accounts.js I have this:
var AccountsRoute = Ember.Route.extend({
model: function() {
var store = this.get('store');
return store.find('account');
}
});
export default AccountsRoute;
At this stage I'm simply trying to get a list of accounts from the fixtures displayed on screen. The route works nicely and if I put in static data (like the index route) then all works fine. However, with the code above, I run into trouble
DEPRECATION: Action handlers contained in an `events` object are deprecated in favor of putting them in an `actions` object (error on <Ember.Route:ember352>)
at Object.triggerEvent (http://localhost:8000/vendor/ember/index.js:30519:13)
at trigger (http://localhost:8000/vendor/ember/index.js:29641:16)
at handleError (http://localhost:8000/vendor/ember/index.js:29903:9)
at invokeCallback (http://localhost:8000/vendor/ember/index.js:8055:19)
at null.<anonymous> (http://localhost:8000/vendor/ember/index.js:8109:11)
at EventTarget.trigger (http://localhost:8000/vendor/ember/index.js:7878:22)
at http://localhost:8000/vendor/ember/index.js:8180:17
at Object.DeferredActionQueues.flush (http://localhost:8000/vendor/ember/index.js:5459:24)
at Object.Backburner.end (http://localhost:8000/vendor/ember/index.js:5545:27) index.js:394
Error while loading route:
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
index.js:394
Uncaught #<Object> index.js:30566
Where am I going wrong?
Your Account model is using the DS.RESTAdapter instead of the DS.FixtureAdapter, because you are setting the adapter in ApplicationAdapter, the expected is AccountAdapter. So you receive an error from the ajax, probably because the url does not match a server.
To configure the DS.FixtureAdapter per model use:
var AccountAdapter = DS.FixtureAdapter.extend();
export default AccountAdapter;
Or as global adapter for all models:
App.Store = DS.Store.extend({
adapter: DS.FixtureAdapter
});
I hope it helps
I think the real issue was that you defined your Fixture Adapter in adapters/adapter.js.
When you called:
store.find('account');
It correctly found the model but then looked for the correct adapter. You don't have an adapters/account.js so it used the application default, which has been mentioned is a RESTAdapter.
To get your example working, just change the filename.
I was getting the same error...
However I was able to fix this by importing my ApplicationAdapter, and using that to define my store:
app/adapters/application.js:
var ApplicationAdapter = DS.FixtureAdapter.extend();
export default ApplicationAdapter;
app/store/application.js:
import ApplicationAdapter from 'appkit/adapters/application';
var Store = DS.Store.extend({
adapter: ApplicationAdapter
});
export default Store;
Keep in mind I have not changed the default application name away from appkit yet, you may have to change this name or the paths to make this function properly for you.