Ember JS：將組件中的3個輸入映射到一個值

Question

我正在使用一個用於輸入日期的組件，該組件將具有3個單獨的輸入字段（日期，月份，年份），但是我想將每個字段的值連接為一個格式化的值（例如2017年1月2日），將綁定到我的模型。

我為此使用了一個觀察者，因此，如果有任何輸入更改，我都會更新格式化的值。 我還有一個觀察者，當格式更改時，我會監聽3個字段。

問題似乎是當我更改格式化的值時，一個觀察者踢了進來，我為3個字段設置了值，然后我又踢了另一個觀察者，然后又踢了格式化值，依此類推。

我想知道是否有更簡單的方法來做到這一點？

Answer 1

通常不要使用觀察者 。 在您的特定情況下，您可以只使用帶有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

最好將兩種行為都放在一個觀察者中。 除非您可以使用互斥鎖“鎖定”第二個觀察者的行為，或者通知它第一個觀察者已加入。

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