liquid fire within routes (on model change) trouble

[tarponjargon]

Sorry if this is covered before...I did some searching and there was no answer forthcoming...

I am trying to figure out a pattern for applying liquid fire within the same route (like when the model changes but you stay on the same route), and not finding anything. I've tried alot of permutations of withinRoute, fromModel->toModel and betweenModelsand nothing seems to work. There aren't any examples of these in use anywhere (that I can find).

I am having partial success with liquid-bind like:

{{#liquid-bind model class="model-change" as |newProduct|}}
...
{{/liquid-bind}}

but the problem is that alot of properties used in the template are not right on the model, they are computed properties (or just controller properties). So only the properties on the model get the treatment.

Alternatively, I can liquid-bind ALL properties in my templates that are not on model. but, there are alot. Failing a higher-level solution this will be my approach.

The question is, are withinRoute, fromModel->toModel and betweenModels supported and is there any further documentation or examples available?

Otherwise, I'm having good success with liquid-fire, it's a very cool addon. Thanks!

[ef4]

Thanks for reporting, we clearly have some missing docs here.

Model transitions on the same route are slightly annoying due to the fact that Ember controllers are singletons. So when a model changes, there is nothing to stop the template from immediately changing, so we have no way of gracefully showing the old content going away.

But there are two solutions to your problem. The first (and most robust), is to use liquid-bind on your model as you would any changing value that you want to animate.

{{#liquid-bind model use=someAnimation as |currentModel|}}
  {{currentModel.title}}
{{/liquid-bind}}

That gives us full control over when the content renders. We don't have control over when model changes, but we do have control over currentModel, and we can render both the old and new ones at the same time. Keep in mind that transition constraints like fromRoute or toModel won't apply at all to this, because we're not animating with a liquid-outlet anymore.

The second answer is that there is an experimental feature to animate model-to-model transitions directly within liquid-outlet, but it has a caveat (which is why it is still experimental and not the default behavior). To use it, you set {{liquid-outlet watchModels=true}}, and you need to wrap your template in illiquid-model like:

{{#illiquid-model model as |currentModel}}
  {{currentModel.title}}
{{/illiquid-model}}

This again gives us control over when the content updates visually. The benefit is that you can write rules using fromRoute, toModel, etc, that will decide which animation to run (because in this case you are animating via the liquid-outlet). The downside is the illiquid-model guard that's needed to prevent the content from immediately updating to the new model before animation has a chance to run.

[tarponjargon]

Thanks for the explanation and suggestions. I tried the experimental feature by adding this to my application.hbs:

{{liquid-outlet watchModels=true}}

and this to my product.hbs (the 'product' route being one I want customers be able to "transition" from one product to another)...

{{#illiquid-model model class="animate-model-change" as |currentModel|}}
    ...
    <h2>{{{currentModel.name}}}</h2>
    ...
{{/illiquid-model}}

But it looks like when I go from one product to the next, the previous model is being retained:

Did I miss a step?

Thanks again!