liquid-outlet not working in beta?

[yankeeinlondon]

I have tried to get a very simple configuration working with the latest beta build of Ember but it appears to halt loading templates (aka, the outlet) but without reporting any errors. Is this a know issue? Is there any work-around?

As for general setup, I'm using:

ember-cli: 0.2.1 ember: 1.11.0-beta.5.92ef97e6 ember-data: 1.0.0-beta.16 (not that this should matter)

WRT to liquid-fire, I started out using v.0.18.0 but then switched to the latest commits from @master as I thought I saw some commits there which I thought might get me over the hump.

[yankeeinlondon]

Ahh yes and I should add that when I am on 0.18.0 I do get an error:

Uncaught TypeError: Cannot read property 'container' of undefined

This error goes away when on @master but as mentioned above it doesn't load the outlet.

[yankeeinlondon]

I now remember that it was this thread:

https://github.com/ef4/liquid-fire/issues/190

which pointed me in the direction of @master but unfortunately this was not a magic bullet for me.

[abarax]

I also have this problem. It has prevented me from upgrading to 1.18.0 and Ember 1.11 beta for now.

[ef4]

Hmm. I would expect liquid-fire master with ember beta to work.

• Does your content render but not animate, or does it not render at all?
• Is your content in the DOM, but hidden?
• If you're using master, what sha?

[yankeeinlondon]

Answer for me are:

• Page renders but {{liquid-outlet}} does not render (on v0.18.0 it didn't load at all)
• As for version, let me get it loaded up again but I'm fairly certain it was on 14752e71d3685c3890a1a9642cbc7c3818567b70 ... give me a sec and should be able to reproduce it on this build (I think)

[yankeeinlondon]

Confirmed that I'm on 14752e71d3685c3890a1a9642cbc7c3818567b70

[JFickel]

The liquid-outlet content is in the DOM, but it's hidden.

[abarax]

I discovered this: http://stackoverflow.com/questions/29182950/ember-js-error-cannot-read-property-container-of-undefined-when-using-liquid

and it seems to have fixed the issue for me. Let us know whether it did the same for you guys?

[yankeeinlondon]

@abarax what commit are you on? As mentioned earlier, as of https://github.com/ef4/liquid-fire/commit/14752e71d3685c3890a1a9642cbc7c3818567b70 it was not working for me.

[yankeeinlondon]

I have upgraded to e8e78a4b2cc83cace039420b48cba20e51e8bcf0 (the latest as of today) and it still doesn't work. :(

[ef4]

Were you using containerless=true? That's changed on master.

Please confirm that your own CSS is not breaking your layout and hiding your content.

[yankeeinlondon]

Sorry I'm not sure what containerless=true is. As for it being my CSS, it seems unlikely considering that as soon as I switch the {{liquid-outlet}} back to just a normal {{outlet}} everything works fine (albeit without any animation). I have a very similar setup in an older project that's still on the 17.x tag with Ember v8 ... it works fine.

[yankeeinlondon]

Here's the CSS on the liquid-container and liquid-child on the 17.x old project that works:

[yankeeinlondon]

In comparison, here's a very similarly styled site but using Ember v11 w/ Liquid Fire v18:

[yankeeinlondon]

Ok having gone through that it appears to be that the main difference is that the new one has no height component! That might be my doing. I'll look at that now but open to any ideas you have too.

Note: in both cases we have full-screen backgrounds which are being transitioned from page to page.

[yankeeinlondon]

Well ok, for me my problem is solved. Sorry for pinning the fault on the product. As is often the case the problem was closer to home. :)

In my case I needed the following styling:

.liquid-container {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.liquid-child {
    height: 100%;
}

[ef4]

It still sounds like there's a behavior change in liquid fire that exposed this issue. Reopening so we can find and document for other people who may have difficulty upgrading.

[Samsinite]

I'm getting pretty much the same error -- Uncaught TypeError: Cannot read property 'container' of undefined -- but it instead on the liquid-with helper here. Upgraded from 0.17.0 and Ember 1.10 to 0.18.0 and Ember 1.11.

[Samsinite]

I can confirm that master is working fine for me :)

[lxcodes]

@ef4, not sure if this is related. I ran into the same error with ember-intl. Originally was using 1.1.2 and switched to 1.2.2. At the location of the error, the container lookup was changed (reference file):

var intl      = this.container.lookup('intl:main');

to:

var intl      = view.container.lookup('service:intl');

Not sure if the container lookup needs to be done through the view explicitly or not. Liquid-fire (0.18.0) is using the below while in master it looks like it's completely changed.

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

Just a stab in the dark and a quick observation I found while upgrading dependencies and node.

[lxcodes]

Just as a note, changing this to env.data.view works although I'm not sure if the view is supposed to be accessed that way or not. Currently using this in our prototype as moving to master breaks our liquid-if transitions (haven't investigate that yet).

[e00dan]

Ember 1.12-beta.1, {{liquid-outlet}} instead of {{outlet}} in application.hbs:

Uncaught TypeError: Cannot read property 'container' of undefined

[ef4]

This is the same issue as https://github.com/ef4/liquid-fire/issues/190, closing in favor of that one.

[jondkinney]

@ksnyde thank you very much! I'll prob need to tweak things a bit but your style suggestions got me un-stuck!