We Keep Coding

How do I convert these initializers to instance initializers when upgrading from ember.js 1.11.3 to 1.12 to remove the deprecation warnings?

I'm in the process of upgrading our ember/ember-cli version from 1.11.3 to 1.12, in prep for hitting 1.13 and 2.0 soon after.
However, I'm having some trouble deciphering exactly what has changed wrt initializers and instance-initializers... have looked over the docs and read quite a lot of posts, but still not clear on how these work. I'm particularly confused about the difference between application.register and container.register, and when I should be using application, container, or instance.
Going from ember.js 1.11.3 to ember.js 1.12, ember-cli 0.2.2 to ember-cli 0.2.7
My initializers are fairly simple, can someone help me convert them? A brief overview or link to such on how exactly ember works during the initialization / instance-initialization process would also be helpful.
Here are my existing initializers from 1.11.3:
initializers/auth.js
import Ember from 'ember';
import Session from 'simple-auth/session';
import CustomAuthenticator from 'soxhub-client/authenticators/soxhub';
import CustomAuthorizer from 'soxhub-client/authenticators/soxhub';
export default {
name: 'authentication',
before: 'simple-auth',
initialize: function(container, application) {
Session.reopen({
user: function() {
var userId = this.get('user_id');
if (!Ember.isEmpty(userId)) {
return container.lookup('store:application').find('user', userId);
}
}.property('accountId')
});
console.log('registering authenticator on container');
container.register('authenticator:soxhub', CustomAuthenticator);
container.register('authorizer:soxhub', CustomAuthorizer);
}
};
initializers/inject-session-into-service.js
import Ember from 'ember';
export default {
name: 'inject-session-into-service',
after: 'simple-auth',
initialize: function(container, application) {
console.log('ran initializer for sesion');
application.inject('service:pusher', 'session', 'simple-auth-session:main');
}
};
initializers/inject-store-into-component.js
export default {
name: "injectStoreIntoComponent",
after: "store",
initialize: function(container, application) {
console.log('injecting store onto component');
// container.typeInjection('component', 'store', 'store:main');
application.inject('component', 'store', 'store:application');
}
};

I'm not familiar with the initializers, but I saw this Ember NYC Meetup Talk which addresses initializers and I think it might help you. The whole talk is very interesting but I linked to part where initializers are addressed
Looking at your initializers, I would say that this snippet
Session.reopen({
user: function() {
var userId = this.get('user_id');
if (!Ember.isEmpty(userId)) {
return container.lookup('store:application').find('user', userId);
}
}.property('accountId')
});
Could possibly be moved the the beforeModel hook on the application route. And do something like this?
beforeModel() {
let user = this.get('store').find('user', accountId);
this.get('session').set('user', user);
}
From that talk, I think you're not supposed to use "*.lookup" but you can still use inject/register.
Also, from the ember guides for the latest versions (2.0+). The initializers don't get the containeranymore, but you the application which has the methods to inject/register.
Hope that helps

Weird error with Ember controllers

I'm on Ember Cli version: 0.2.3
I'm currently exploring with Ember, and trying a very simple app.
I have this in my templates/about.hbs
<h1>About</h1>
<p>I'll write something interesting here</p>
<button type="btn btn=primary"{{action 'clickMe'}}>Click me!</button>
and in my controllers/about_controller.js
Blogger.AboutController = Ember.Controller.extend({
actions: {
clickMe: function() {
alert('Something something');
}
}
});
when I click on the button i get this error, I checked the syntax and can't seem to catch what's wrong. I need some fresh eyes.
Uncaught Error: Nothing handled the action 'clickMe'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
Now, I understand what the message is saying, but I don't know how to fix it yet.

Ember probably can not find your controller. You can debug this using ember inspector. In any case you should be using ES6 conventions inside your ember cli project. You can get to know more about the subject here.
Anyway, try to create about controller using command line by typing
ember generate controller about
and then add your action manually.

Are you using ember cli or Ember starter Kit for your program.
If you are using Ember cli then you should create files like -
app/templates/about.hbs
app/controllers/about.js
and you should make one entry in app/router.js too[I think you must have done that.]
Entry in router.js-
Router.map(function() {
this.route('about');
});
Now your template/about.hbs should be-
<h1>About</h1>
<p>I'll write something interesting here</p>
<button {{action 'clickMe'}}>Click me!</button>
and controllers/about.js should be-
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions:{
clickMe: function() {
alert('Something something');
}
}
});
After making all the above changes execute below command on CMD -
ember server (this should start the server)
Your code should work if you do it in above pattern.
Naming conventions are very important in Ember.

Flash of login screen while user is logginIn in Meteorjs

Forgive me if this is an absolutely dumb question but I have spent like a day trying to fix this but just couldn't. So, I am using accounts-templates which has been recently renames to useraccounts. Specifically I'm using the unstyled version. On my home route(using Iron Router), I have the following code:
Router.configure({
loadingTemplate: 'loading'
});
Router.map(function() {
this.route('home', {
path: '/',
onBeforeAction: function(pause) {
return AccountsTemplates.ensureSignedIn.call(this, pause);
}
});
});
Router.onBeforeAction('loading');
But when I load up the home page, there is this flash showing the login page and then the home template loads up. Ideally a progress bar should show up while the user is logging in and everything runs smooth.
I tried solving this with the iron-router-progress which I found out, doesn't work with Meteor 1.0. Then I tried integrating nprogress but that didn't work. So what's the solution?

I would change the onBeforeAction to something along the lines of this, not guaranteeing this will work mind but it at least brings you up to date with the changes form 0.9.4 iron router to 1.0.0.
Router.map(function() {
this.route('home', {
path: '/',
onBeforeAction: function() {
if (! Meteor.userId()) {
this.render('loading');
} else {
this.next();
}
}
}
});

UserAccounts (formerly AccountsTemplates) has now (since versin 1.8.0) an ensureSignedIn plugin for Iron Router.
No more flashes!
See the updated documentation about Content Protection to understand how to use it.
Disclaimer: I'm the developer of UserAccounts

Ember.js Rails Error while loading route:

I'm currently reading the Master Time and Space Ember.js tutorial and trying to build the sample application. I'm building the ember app with rails using the ember-rails gem.
I have followed the instructions for building my index route, controller, model and template. However, my index.hbs template is not being rendered due to this error that I am receiving in the console:
Error while loading route: undefined logToConsole
this function logToConsole is defined within the ember.js file that the gem compiles for you.
My router is defined as app/assets/javascripts/routes/app_router.js
TimeTravel.Router.reopen({
location: "history"
});
TimeTravel.Router.map(function(){
this.route("index", {path: "/"});
});
The index route is defined as app/assets/javascripts/routes/index_route.js
TimeTravel.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('trip');
}
});
The controller app/assets/javascripts/controllers/index_controller.js
TimeTravel.IndexController = Ember.ArrayController.extend({
});
Can someone please explain this error? Or at least point out some good debugging tools for ember. Thanks in advance!

How to create two separate pages in ember

I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages.
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page.
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}.
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp.
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade?

I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js
App.Router.map(function() {
this.route('color');
this.route('shade');
});
// Color.js
// here all color resources
App.ColorRoute = Ember.Route.extend({
// your implementation
});
// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
// your implementation
});
In your ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery', 'handlebars', 'ember'
resource url:'js/App.js'
}
shade {
dependsOn 'application'
resource url: 'js/Shade.js'
}
color {
dependsOn 'application'
resource url: 'js/Color.js'
}
}
In shade.gsp
<r:require modules="shade"/>
In color.gsp
<r:require modules="color"/>