3

我正在尝试在 Ember 2.0.1 中实现嵌套组件，但是toggleProperty在操作处理程序中使用函数时出现了奇怪的行为。

第一个组件如下所示：

// ./components/comp-1.js
import Ember from 'ember';

export default Ember.Component.extend({
  prop1: false,
  hello: "Default text of comp-1",

  _changeHello: function() {
    this.set('hello', 'Text set by comp-1');
  }.on("init"),

  actions: {
    customAction1() {
      this.toggleProperty('prop1');
    }
  }
});

.

// ./templates/components/comp-1.hbs
<button {{action 'customAction1'}}>{{hello}}</button>

第二个是：

// ./components/comp-2.js
import Ember from 'ember';

export default Ember.Component.extend({
  data: [],

  _doSomeImportentStuff: function() {
    var data = this.get('data');

    data = [{name: 'Text set by comp-2', bool: false}, 
            {name: 'Text set by comp-2', bool: true}];

    this.set('data', data);
  }.on("init")
});

.

// ./templates/components/comp-2.hbs
{{#each data as |d|}}
{{comp-1 hello=d.name prop1=d.bool}}
{{/each}}

该组件comp-2创建两个按钮，其名称为由 comp- 1设置的 Text。如果我单击一个按钮，文本将更改为由 comp - 2设置的文本，因为执行了this.toggleProperty('prop1')在操作处理程序中调用的函数customAction1。如果我删除此功能或删除prop1from的设置，./templates/components/comp-2.hbs那么一切都会按预期工作，即按钮的文本始终保持为由 comp- 1设置的文本。

为什么toggleProperty函数会设置其他属性？

难道我做错了什么？

可以在此处查看实际行为：http: //ember-twiddle.com/90798b4952deb4a83de1

4

1 回答 1

1

在我看来，您通过将两条不同的数据绑定到init. 您将comp-1's设置hello为Text set by comp-1on comp-1's init，并将其绑定到d.nameon comp-2's init。

您可能期望 的价值hello只是解决最后一个问题，然后从那里按预期工作，但是您遇到了双向数据绑定的问题之一，并举了一个很好的例子来说明 Ember 社区为什么要离开从双向绑定和拥抱DDAU。

我认为这只是您偶然发现的，因为我无法想象这种确切的情况会在野外发生，但以防万一，请使用Ember.computed.oneWay：

export default Ember.Component.extend({
  prop1: false,
  readOnlyHello: Ember.computed.oneWay('hello'),

  _changeHello: function() {
    this.set('readOnlyHello', 'Text set by comp-1');
  }.on("init"),

  actions: {
    customAction1() {
      this.toggleProperty('prop1');
    }
  }
});

然后使用{{readOnlyHello}}代替{{hello}}inside of comp-1's 模板。

如果您需要使用d.bool中comp-2的按钮切换comp-1，您也应该在此处关注 DDAU。您将发送一个动作comp-2并让comp-2执行切换。

于 2015-10-28T08:05:08.307 回答