textarea - 如何从 Ember js 中的文本区域编辑数组？

Question

我正在尝试从 textArea 更新一个数组，其中的每一行都是一个新项目。这是我尝试做的，但 textArea 不更新数组：

车把：

<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')
});

和jsFiddle 我知道它不可能那么简单，但我不知道从哪里开始。任何的想法？

Answer 1

干得好：

小提琴：http: //jsfiddle.net/Sd3zp

灰烬控制器：

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'),
});​

车把模板：

<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

接受的答案不适用于 ember-1.0.0-rc3。

计算属性现在可以具有设置器，因此问题中的示例将更改为

JS斌：http: //jsbin.com/iworub/2/

车把：

<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')
});