Have an interesting problem in Ember js.
Here below is the component (components/advanced-search) with two computed properties (roomType & room) dependent on then service (services/advanced-search) 'queryObj' object properties.
Interestingly, the 'roomType' computed property fires correctly and updates the template correctly when an option is selected from the template. However, the 'room' computed property fails to fire when a room is selected from the template.
However, for testing purposes only, when I uncomment the code in the init method that sets the array that populates the dropdown for rooms and comment the code in the actions hash inside the setRoomType action method that was initially setting the rooms array, then the room computed property fire correctly and updates the template.
export default Ember.Component.extend({
advancedSearch: Ember.inject.service('advanced-search'),
queryObj: Ember.computed.alias('advancedSearch.queryObj'),
init() {
this._super(...arguments);
// When rooms array initialized from here the room computed property fires successfully on room selection from drop down
// this.get('store').findAll('room').then((rooms) => {
// this.set('rooms', rooms);
// });
},
roomTypes: [],
roomType: Ember.computed('queryObj.{roomTypeId}', function() {
var that = this;
return this.get('roomTypes').find(function(roomType) {
return that.get('queryObj').roomTypeId === roomType.id;
});
}),
rooms: [],
room: Ember.computed('queryObj.roomId', function() {
var that = this;
return this.get('rooms').find(function(room) {
return that.get('queryObj').roomId === room.id;
});
}),
actions: {
setRoomType(roomType) {
this.get('advancedSearch').setRoomType(roomType);
this.set('room', null);
if (roomType) {
// When rooms array initialized from here the room computed property fails to fire on room selection from drop down
roomType.get('rooms').then((rooms) => {
this.set('rooms', rooms);
});
} else {
this.set('rooms', null);
}
},
setRoom(room) {
this.get('advancedSearch').setRoom(room);
}
}});
Here below is the service (services/advanced-search) code:
export default Ember.Service.extend({
queryObj: {},
setRoomType(roomType) {
this.set('queryObj.roomTypeId', roomType.id);
},
setRoom(room) {
this.set('queryObj.roomId', room.id);
}
});
NB: My desire is for the 'rooms' property to be set from the action method 'setRoomType' through the 'roomType' model's relationship property called 'rooms' so that the rooms are always filtered according to the 'roomType' selected.
Your help will be greatly appreciated.
Ember Version:
-Ember Inspector 2.0.4
-Ember 2.8.2
-Ember Data 2.9.0
-jQuery 3.1.1
-Ember Simple Auth 1.1.0
Aucun commentaire:
Enregistrer un commentaire