Series: Animations with Liquid FIre

Liquid Fire-Liquid Bind

Published on Mar 09, 2016

liquid-bind is Liquid Fire’s most versatile template helper. It comes in two forms- inline and block- and is used for anything that’s not a route transition, an if statement, or a simple change in size.

In this episode we go over both the inline and block forms of liquid-bind, showing how to use them successfully as well as how to avoid some of the most common pitfalls.


Links

Code

inline form: {{liquid-bind model.name}}

block form:

{{#liquid-bind model class="liquid-monster" as |newMonster|}}
  <div class="monster-card">
    <span class="name">{{newMonster.name}}</span>
    <span class="pull-right">Level: {{newMonster.level}}</span>


    <img src={{newMonster.imageUrl}} />
    <br>
    ${{newMonster.price}}
  </div>
{{/liquid-bind}}

Transcript

Hey and welcome to Part Three of our series on Liquid Fire. In the last two episodes, we covered doing transitions with liquid-outlet and for doing data transitions with liquid-if and liquid-spacer. We’re going to be doing another type of data transition, this time with liquid-bind.

In this case, we’re going to want to animate the change of monster. So notice it’s within the same route, so liquid-outlet doesn’t really work. And at the same time it’s not just a spacing issue, and it’s not an if statement. So we’ll need to use liquid-bind.

So liquid-bind has two different forms. It has the inline form and it has the block form. We’ll start with the inline form.

So for that, we have something that’s in handlebars, an attribute, and we can just say liquid-bind. And now liquid-fire has access to that and can change it. Now notice where this is. So it’s within a span with the class of name, so we don’t have to put our own separate class on this. In our transition when we’re using the transition instead of using hasClass so we can use childOf, and it matches with CSS selectors.

Alright. And then we can use any of the transitions that we have from other places. So I like toDown in this case. And we see it working. Notice that the name is animating.

So now it’s on to our next property, the level. So we can put liquid-bind here. And notice that these are both under the div with a class of monster-card. So your first thought may be to just... well they’re both eventually children of the monster card. But unfortunately, it only does direct children, not grandchildren.

So if we want any of them to animate, we need transitions for it. So we could make individual transitions, but I think this is a great time to use the use property. And we’ll make this one fade.

There we go. We’ve got them animating. But what if we did toRight instead of fading? Alright. That’s looking pretty cool.

So far this has happened fairly effortlessly, aside from that thing about grandchildren. But now this one gets more difficult. So if we put a liquid-bind here, then notice that our page isn’t showing at all, and if we look, it’s because... well, we’re inside this image source. And so that’s not going to play well since liquid-bind sets up its own CSS.

So what we have to do is use the block parameters of liquid-bind. So here we go and we close it off and let’s see what that gives us. Well, that’s better than the whole page not loading, but our CSS isn’t applying very well to it. And so this is not a great experience.

So this is something to watch out for. liquid-bind creates its own HTML. I mean all of the Liquid ones do. And sometimes that can mess with your HTML and your CSS. So the way I found to get around this is to wrap the liquid-bind around the entire card so we can no longer nest under a class, so we have to give it its own class. So we’ll call it liquid-monster. And we’ll have to re-indent everything, and then close it out.

So then in the transition file, we’ll change this to hasClass, and instead of being nested under name, it is the class of liquid-monster. And notice we don’t have the dot before, because that’s implied with the hasClass. You only need the dot with childOf. And we’ll go ahead and have a toRight, because that will look better.

And let’s see how this works. Uh-Oh. It doesn’t seem to be working. Why is this? Well, notice here with the liquid-bind, which by the way we don’t need anymore... So with the liquid binds, they had a second argument, and that was what they were bound on. And this liquid bind also has to have one of those. And here it’s bound on the model, so anytime the model changes, it’s going to do the transition.

There we go. So we can see the cards changing whenever we change the model. So this looks pretty good, but I want you to look closer. And to facilitate that, we’re going to go ahead and give this a duration of three seconds, plenty slow.

So we hit this, and notice that it changes all the data before it transitions. But there’s a great way to get around that. So the liquid-bind helper, the block helper, it has an as statement. So we can call our newModel, or newMonster in this case. And so everything that we want to not have changed instantaneously, but to have it change as the animation progresses, that we need to take off the new monster. So we’re going to replace all these, and now we’ll see the type of smooth transition that we were wanting.

So in this episode, we showed how to use the Liquid Fire liquid-bind helper in both its inline form and its block form. We also showed several common pitfalls, several ways that you might accidentally do it wrong and how to get around those.

So next time we’re going to talk more about the Transition Map. So we’ve talked about it in passing, and we’ve gone over a lot of the features when we’ve been working with the template helpers. But we’re going to do a more comprehensive overview. I’ll see you next episode.

Animations with Liquid FIre

Subscribe to our mailing list