How to edit an array from a textarea in Ember js? - textarea

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>

Answer 2

The accepted answer doesn't work with ember-1.0.0-rc3.
Computed properties can have setters now so the example in the question would be changed to
JS Bin: http://jsbin.com/iworub/2/
Handlebars:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{view Ember.TextArea valueBinding="formattedContent" rows="7"}}
</br>
{{#each content}}
{{this}}</br>
{{/each}}
</script>
JavaScript:
App = Ember.Application.create({});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['some', 'items', 'in', 'an', 'array']);
}
});
App.IndexController = Ember.ArrayController.extend({
formattedContent: function(key, value) {
//getter
if (arguments.length === 1) {
return this.get('content').join('\n');
//setter
} else {
this.set('content', value.split('\n'));
}
}.property('content')
});