Question

I’m trying to update an array from a textArea, each line of which would be a new item.
Here is what I tried to do, but the textArea doesn’t update the array:

Handlebars:

<script type="text/x-handlebars">
    {{view Ember.TextArea valueBinding="App.listController.formattedContent"}}
    </br>
    {{#each App.listController}}
        {{this}}
    {{/each}}
</script>

JavaScript:

App = Ember.Application.create({});

App.listController = Ember.ArrayController.create({
    content: ['some', 'items', 'in', 'an', 'array'],
    formattedContent: function() {
        return this.get('content').join('\n');
    }.property('content')
});

and the jsFiddle
I know it can’t be that simple, but I have no idea where to start.
Any idea?

Answer 1

Here you go:

Fiddle: http://jsfiddle.net/Sd3zp

Ember Controller:

App.listController = Ember.ArrayController.create({
    content: ['some', 'items', 'in', 'an', 'array'],

    init: function() {
        var content = this.get('content');
        if(content.length > 0){
           this.set('rawContent', content.join('\n'));
        }            

        this._super();
    },

    rawContentDidChange: function(){
       var rawContent = this.get('rawContent');

       var content = rawContent.split('\n');
       this.set('content',content);
    }.observes('rawContent'),
});​

Handlebars template:

<script type="text/x-handlebars">
  {{view Ember.TextArea valueBinding="App.listController.rawContent" rows="5"}}
  <br />
  <br />
  <strong>Output listController content items:</strong>
  {{#each App.listController.content}}
     {{this}} <br />
  {{/each}}
</script>