Ember JS: Сопоставление 3 ввода в компоненте с одним значением

Question

Я работаю над компонентом для ввода даты, компонент будет иметь 3 отдельных поля ввода (дата, месяц, год), но я хотел бы объединить значение каждого поля в форматированное значение (ex 2017-01-02), которое я бы привязал к моей модели.

Я использую наблюдателя для этого, поэтому, если какое-либо изменение ввода я обновляю форматированное значение. У меня также есть наблюдатель, который слушает, когда форматированный изменился, я обновляю 3 поля.

Проблема, кажется, когда я изменил отформатированный значение, один наблюдатель умирает, я установил значение для 3-х полей, то я другой наблюдатель умирает, то отформатированные значение пинки в и т.д.

Я интересно, есть ли более простой способ сделать это?

Answer 1

Возможно, было бы лучше всего поместить оба поведения в один наблюдатель. Если запретить вам использовать мьютекс, чтобы «заблокировать» поведение второго наблюдателя или уведомить его о том, что первый наблюдатель забил.

Answer 2

Как правило, 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 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}`); 
    } 
}