samedi 21 mars 2015

Ember.js error "Cannot read property 'container' of undefined" when using Liquid Fire


I'm a beginner to front-end development and trying to utilize Ember.js for my project. I stumbled upon a great talk by Edward Faulkner about Liquid Fire at EmberConf 2015. It looked incredibly easy to apply and so I decided to give it a try.


My app is using Ember and Ember-Data Canary via ember-cli 0.2.0.


The structure of the app is somewhat like this:



application.hbs
\users
\user
work.hbs
profile.hbs
...
user.hbs


And the part of the router.js file that's responsible for this is:



this.resource('users', function (){
this.resource('users.user', { path: '/:user_id' }, function () {
this.route('work');
this.route('profile');
...
});
});


After I installed the addon with npm install --save-dev liquid-fire, I replaced {{outlet}} in my user.hbs file with {{liquid-outlet}} and added a transitions.js file with some simple transition data:



export default function () {
this.transition(
this.toRoute('users.user'),
this.use('fade')
);
}


But as soon as I navigate to the user page, I get a javascript error:



Uncaught TypeError: Cannot read property 'container' of undefined


Which originates in a liquid-outlet.js file, on line 15:



var View = this.container.lookupFactory("view:liquid-outlet");


I have no idea what I am doing wrong. It seems like there's something with my {{liquid-outlet}} being placed in the wrong place or something, but I've tried moving it elsewhere, with no luck. As soon as I navigate to a template that has {{liquid-outlet}} in it, I get the same error. Please help.


Thank you, Oleg





Aucun commentaire:

Enregistrer un commentaire