Question

我正在尝试编写一个包含两个段落的Ember.Component，一个textarea以及将段落加载到textarea进行编辑的操作，然后保存更改。（目前，ESC按下保存更改，理想情况下会保存更改＃34; - 我稍后会更改的更改。）

我已准备好JSbin，其余部分是解释和伪代码。

组件模板：

  {{#each p in paragraphs}}
    <p {{action 'selectParagraph' p}}>{{p}}</p>
  {{/each}}

  {{textarea value=selectedParagraph escape-press='updateParagraph'}}

组件的伪代码：

  paragraphs: ['one', 'two'],

  selectParagraph: f(p) { this.set('selectedIndex', paragraphs.indexOf(p)); },

  selectedParagraph: f() { this.get('paragraphs')[this.get('selectedIndex')] ; },

  updateParagraph: f(data) {
      var p = this.get('paragraphs');
      p[this.get('selectedIndex')] = data;
  }

但是，updateParagraph()电话后原始段落未更新。在生成的页面源中，#each循环呈现的段落周围有变形脚本标记，因此我相信Ember知道<p>内容是动态的。

我怀疑我错过了一些明显的东西，这似乎是一项相当直接的任务。我可能无法设置某些内容，以致paragraph数组更改导致重新渲染;或者我没有在＆＃34; Ember-way＆＃34;中更改数组元素（字符串）本身。

非常感谢任何帮助，谢谢。

Answer 1

您可以使用replace http://emberjs.com/api/classes/Ember.MutableArray.html#method_replace

var p = this.get('paragraphs'),
    idx = this.get('selectedIndex');
p.replace(idx, 1, [data]);

您可以使用Ember.A（[]）包装数组以获取替换功能。

Em.A([ 'First component embedded paragraph.', 'Second component embedded paragraph.' ])

此外，当您分配到计算属性时，您会遇到问题，因此通常最好避免使用该模式。

示例：http://emberjs.jsbin.com/wuyit/1/edit

或者您可以removeAt和insertAt

如何从操作更新组件的数组属性？

1 个答案: