CODEWITHSUNDEEP
ember.js
Rajat
Rajat

Reputation: 34148

Bind TextArea linebreaks to html

I have a textarea binded to a div such that anything you type in the textarea updates the div.

The only thing that bindings doesn't respect is newlines in textarea so if you hit 'enter' within textarea, the div doesn't get a break.

Fiddle: http://jsfiddle.net/lifeinafolder/Ajkyw/19/

I am using a helper and it doesn't work.

As per Point 4 on this link: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/, it is not supposed to work. But even with the solution on that link, I can't get it to work.

Any ideas on how to update the div with <br/> tags on linebreaks within the textarea?

Upvotes: 1

Views: 1995

Answers (1)

Ryan
Ryan

Reputation: 3594

Use a computed property to format the location's line breaks.

HTML: 

<script type="text/x-handlebars">
    {{#with App.obj}}
        {{view Ember.TextArea valueBinding="location"}}  
        <div>{{{formattedLocation}}}</div>
    {{/with}}
</script>

JavaScript:

App.obj = Ember.Object.create({
    location:'Palo Alto',

    formattedLocation: function() {
        return this.get('location').replace(/\n\r?/g, '<br />');
    }.property('location').cacheable()
});

http://jsfiddle.net/e8G2j/

In the example I removed your helper so it would be a bit easier to follow exactly what is going on. If you need to use a helper and are unable to figure it out let me know and I will add the helper back in.

Upvotes: 7

Related Questions