Javascript 观察服务中的对象属性时，组件中的Ember Js计算属性失败

在Ember js中有一个有趣的问题

下面是组件

advanced search/component.js

，它有两个计算属性

roomType

和

room

依赖于服务

services/advanced search

queryObj.{roomId，roomTypeId}

对象属性

当从模板中选择选项时，

roomType

computed属性将激发并正确更新模板。但是，有趣的是，当从模板中选择房间时，

room

computed属性无法激发。我通过将

console.log（'checking room computed fired'）

放在

room

computed属性中来验证这一点

为了进一步探索这种异常现象，我做了以下工作：

我取消了您在

init

方法中看到的代码的注释，该方法设置

rooms

数组，该数组填充房间列表下拉列表，并在最初设置

rooms

数组的

setRoomType

操作方法内的actions散列中对代码进行注释。在这些更改之后，

房间

计算属性将正确激发并更新模板

我注意到

this.get（'store'）返回的数组。findAll（'roomType'）

导致

roomType

计算属性正确激发并更新模板，因此我尝试将

rooms

内部

setRoomType

的调用从

roomType.get（'rooms'）

更改为

this.get（'store）

查看它是否也导致

房间

计算属性正确启动，但它仍然没有启动

房间

计算属性。因此，我得出结论，如果在组件的

init

方法中设置了

roomType

和

room

计算属性的下拉列表数组，则它们只能正确地触发和更新模板

高级搜索/component.js 以下是服务代码：

服务/高级搜索 以下是组件模板：

高级搜索/模板.hbs

高级搜索
{{{#power select placeholder=“Room type”allowClear=true selected=roomType options=roomTypes onchange=（action“setRoomType”）as{124; roomType}{{{roomType.name}}{{/power select}}
{{{power select placeholder=“Room No”allowClear=true selected=Room options=Room onchange=（操作“setRoom”）as{{124; Room}}{{{Room.name}{{{/power select}}

您不应该像

这样设置计算属性。set（'room'，null）我猜这一行代码就是罪魁祸首。一旦你像这样设置了计算属性，那么这个计算属性就不会再次触发

您可能需要的是带有get和set的
room
computed属性。提及

您不应该像
this.set（'room'，null）那样设置计算属性我猜这一行代码就是罪魁祸首。一旦你像这样设置了计算属性，那么这个计算属性就不会再次触发

您可能需要的是带有get和set的
room
computed属性。提及

是的，这对我来说也很突出。最好不要在计算属性上使用set，而要改变计算属性所依赖的任何内容。这让事情变得可预测性很好。你一提起我就看到了。我不敢相信我花了4个小时做了这么明显的事情。实际上，我设置了错误的属性，错误的值。我想设置的是
this.set（'rooms'，[]）。现在，它可以完美地工作，因为
房间
属性不是计算属性，而是设置房间列表的属性。谢谢大家！是的，这对我来说也很突出。最好不要在计算属性上使用set，而要改变计算属性所依赖的任何内容。这让事情变得可预测性很好。你一提起我就看到了。我不敢相信我花了4个小时做了这么明显的事情。实际上，我设置了错误的属性，错误的值。我想设置的是
this.set（'rooms'，[]）。现在，它可以完美地工作，因为
房间
属性不是计算属性，而是设置房间列表的属性。谢谢大家！
export default Ember.Component.extend({
advancedSearch: Ember.inject.service('advanced-search'),
queryObj: Ember.computed.alias('advancedSearch.queryObj'),
init() {
    this._super(...arguments);
    // I believe because the 'roomTypes` array is set in this init method, the 'roomType' computed property fires correctly and updates the template
    this.get('store').findAll('roomtype').then((roomTypes) => {
        this.set('roomTypes', roomTypes);
    });
    // When the 'rooms' array is also initialized here, the 'room' computed property fires successfully on 'room' selection from the dropdown and updates the template
    // 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() {
    console.log('checking room computed fired')
    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);
    }
}});

export default Ember.Service.extend({
queryObj: {},
setRoomType(roomType) {
    this.set('queryObj.roomTypeId', roomType.id);
},
setRoom(room) {
    this.set('queryObj.roomId', room.id);
}});

test:Ember.computed('dependantKey',{
    get(key){
      return 'result';
    },
    set(key,value){
      return value;
    }
  })