Question

我正在处理一个用于输入日期的组件，该组件将有3个单独的输入字段（日期，月份，年份），但我想将每个字段的值连接成格式化值（ex 2017-01-02））我会绑定到我的模型。

我正在使用观察者，所以如果任何输入更改，我更新格式化的值。我也有一个观察者，听到格式化更改时，我更新了3个字段。

问题似乎是当我更改格式化的值，一个观察者开始，我设置3个字段的值，然后我另一个观察者开始，然后格式化值开始，等等。

我想知道有更简单的方法来实现这个目标吗？

Answer 1

作为一般规则don't use observers。在您的特定情况下，您可以使用计算属性with a setter，例如：

day: 1,
month: 0, 
year: 2000,

formattedDate: Ember.computed('day', 'month', 'year', function(){
  get(key){
    // Create a new date from the three properties
    const date = new Date(this.get('year'), this.get('month'), this.get('day'));
    // Return the date formatted however you want it
    return date.toDateString();
  },
  set(key, value){
    // Create a new date from the value passed in
    const date = new Date(value);
    // Set the three properties 
    this.set('day', date.getDate());
    this.set('month', date.getMonth());
    this.set('year', date.getFullYear());
  }
})

Answer 2

最好将两种行为都放在一个观察者身上。除非您可以使用互斥锁来锁定＆＃34;第二个观察者的行为，或通知它第一个观察者已经踢了。

Answer 3

我强烈建议不要使用观察者。我认为最好的方法是使用DDAU。所以你有这样的输入：

day:<input onchange={{action 'setDatePart' 'day' value="target.value"}} />
month:<input onchange={{action 'setDatePart' 'month' value="target.value"}} />
year:<input onchange={{action 'setDatePart' 'year' value="target.value"}} />

然后在您的组件中执行此操作：

actions: {
  setDatePart(part, val) {
    set(this, part, val);
    const {year, month, day} = this.getProperties('year', 'month', 'day');
    return new Date(`${year}-${month}-${day}`);
  }
}

Ember JS：将组件中的3个输入映射到一个值

3 个答案: