@belgoros wrote:
I have a select element in every row. I’d like to to implement
onChange
event so that when I select a specific value in theselect
drop-down list, the textfield in the same row will be disabled.Here is how the component template is called from other template:
# templates/working-hours.hbs {{#each weekdays as |weekday|}} <div class="form-group row"> {{weekday-row weekday=weekday modelDays=model}} </div> {{/each}}
So here is my component:
# templates/components/weekday-row.hbs <label for="state" class="col-sm-2 col-form-label">{{dayRow.name}}</label> <div class="col-sm-2"> <select class="form-control" onchange={{action "selectState" value="target.value"}}> {{#each states as |state|}} <option value={{state.id}} selected={{eq state.id dayRow.state}}>{{state.name}}</option> {{/each}} </select> </div> <div class="col-sm-2"> {{input min="08:00" disabled=(eq dayRow.state 1) max="22:00" pattern="[0-9]{2}:[0-9]{2}" type="time" class="form-control" value=dayRow.opens }} </div> <label for="closes"class="col-form-label">{{t 'working.hours.labels.to'}}</label> <div class="col-sm-2"> {{input type="time" disabled=(eq dayRow.state 1) min="08:00" max="22:00" pattern="[0-9]{2}:[0-9]{2}" class="form-control" value=dayRow.closes}} </div>
Here is the corresponding JS component:
# components/weekday-row.js iimport Component from '@ember/component'; import { inject as service } from '@ember/service'; import { computed } from '@ember/object'; import EmberObject from '@ember/object'; export default Component.extend({ constants: service(), weekday: null, state: null, opens: null, closes: null, modelDays: [], weekdays: [], states: [], tagName: '', init() { this._super(...arguments); this.states = this.get('constants.states'); this.dayRow = this.buildDayRow(); }, buildDayRow() { let dayRow = EmberObject.create({ name: this.get('weekday.name')}); let foundDay = this.get('modelDays').findBy('day', this.get('weekday.day')); if (typeof foundDay != 'undefined') { dayRow.set('state', foundDay.get('state')); dayRow.set('opens', foundDay.get('opens')); dayRow.set('closes', foundDay.get('closes')); } else { let closedState = this.get('states')[1]; dayRow.set('state', closedState.id); } return dayRow; }, actions: { selectState(state) { //console.log('selected state: ' + state); let selectedRow = this.get('dayRow'); console.log('dayRow before: ' + selectedRow.state); this.get('dayRow').set('state', state); console.log('dayRow after: ' + selectedRow.state); } } });
I tried to call
actions: { selectState(state) { console.log('selected state: ' + state); //TODO this.get('dayRow').set('state', state) } }
But the
dayRow
has not been updated (sure because it depends onweekday
property). I tried to usestate
as CP, but it changes in every row when I change the value in one of the drop-down lists. What is the correct way to manage such a kind of situation ? Thank you.P.S. If there are some wrong use of Ember or technics in the above code, any improvements are always welcome Image may be NSFW.
Clik here to view.
Posts: 2
Participants: 1