Meteor + Blaze, replacing one html tag to another

Question

I need to implement a feature that works like this: 1. User has input field 2. When he starts typing, I track if this text is overflown 3. (What I need to implement) If text is overflown, input changes to textarea , and back if text is reduced, and afterall share the text between input and textarea

So far I have the following code:

<div class="container">
    {{#if multiline}}
        <textarea class="size"></textarea>
    {{else}}
        <input type="text" class="size" />
    {{/if}}
</div>

The most obvious way I see to implement this feature is using Session , I have the following function:

multiline: function () {
    Session.get("multiline");
    if ($(".size > input").prop('scrollWidth') > $(".size >   input").width() ) {
    Session.set("multiline", true);
    } else {
    Session.set("multiline", false);
    }
}

So as you can see I calculate current sting's length to see if it's overflown. If I check Session variable in console, I can see that this calculation works the way I want, but input doesn't transform to textarea when Session("multiple") equals true. Where am I wrong? Or may be there are other ways to implement what I need? Thanks!

Answer 1

It was easy. I kept html and divided logic between helpers and events . My new multiline helper looks like this:

multiline: function () {
    return Session.get("multiline");
  }

And I added an event to Template.body.events that looks like this:

"keyup .size": function (event, template) {
        if (event.target.scrollWidth > event.target.offsetWidth) {
            Session.set("multiline", true)
        }
    }

Worked like a charm.