javascript - Ember.js 为特定模型 ID 添加 css 类

Question

我正在开发聊天应用程序。我有组件模板 - 房间

<div class='border rooms'>
    <button class="add-room-container">
        <div >Add room</div>
    </button>
    {{#each model as |room|}}
     <button class="room-container" 
             {{action "onRoomClicked" room.id}} 
             {{bind-attr class="currentRoomId===room.id:currentRoom"}}>
         <div class="deleteRoom" {{action "deleteRoom" room.id bubbles=false}}>
             X
         </div>
         <div>{{room.name}}</div>
         <div>{{room.createdAt}}</div>
     </button>
    {{/each}}
</div>

和组件js文件 从“ Ember ”导入 Ember ；

export default Ember.Component.extend({
  actions: {
    onRoomClicked(roomId) {
      this.set('currentRoomId', roomId);
    },
    deleteRoom(room) {
      console.log('room removed');
    }

} });

我的线路有问题

{{bind-attr class="currentRoomId===room.id:currentRoom"}}

我想检查当前按钮是否是最后一个被点击的按钮(它在 onRoomClicked 中设置)，如果是则将 currentRoom 类添加到按钮

我试图设置动态属性，但我不知道如何从组件访问当前模型(房间)id，然后像在模板中那样比较它

Answer 1

你有很多不同的方法来做到这一点。但首先问题是您使用的是什么 ember 版本。在当前的 ember 版本中，不应再使用 bind-attr!

所以首先我假设你这样调用你的组件:

{{my-component model=rooms}}

我强烈建议不要调用您的数据 model!给他们一个会说话的名字。做类似 rooms=rooms 的事情!

所以现在你在你的组件中。您可能发现问题是您的 {{#each}} 循环，这导致您没有 .js 文件用于{{#each}} 循环。

---

可能最好的解决方法是使用第二个组件，您可以在每个循环中调用它:

{{#each model as |room|}}
  {{room-line room=room currentRoomId=currentRoomId}}
{{/each}}

然后你可以将你的{{#each}} body 放在你的room-line.hbs 中:

<button class={{if isCurrentRoom "currentRoom"}}>
....

并且您有一个后备 room-line.js，您可以在其中计算 isCurrentRoom:

isCurrentRoom: Ember.computed('currentRoomId', 'room.id', {
  get() {
    return get(this, 'currentRoomId')===get(this, 'room.id');
  }
})

---

另一种处理方法是将 isCurrentRoom 注入(inject)到您的 room 中。这可以通过 .map() 或 ArrayProxy 和/或 ObjectProxy 来完成。

在你的组件 .js 文件中是这样的:

calculatedRooms: Ember.computed('rooms.@each.id', 'currentRoomId', {
  get() {
    return get(this, 'rooms').map(room => ({
      room,
      isCurrentRoom:get(room, 'id') === get(this, 'currentRoomId')
    }));
  }
}),

然后你可以在你的{{#each}} 助手中使用它:

{{#each calculatedRooms as |line|}}
   <button class="room-container {{if line.isCurrentRoom 'currentRoom'}}" 
     {{action "onRoomClicked" line.room.id}}>
    ...
{{/each}}

---

第三种方法是为此使用自定义助手。这可能是最简单的方法，但也可能是最丑陋的方法，因为您将逻辑放在模板中。

一个简单的 is-equal 助手可以帮助您:

export function isEqual(a, b) {
  return a === b;
}

export default Ember.Helper.helper(=);

然后你就可以在你的模板中使用它了:

{{#each calculatedRooms as |room|}}
   <button class="room-container {{if (is-equal currentRoomId room.id) 'currentRoom'}}" 
     {{action "onRoomClicked" room.id}}>
    ...
{{/each}}

如果您选择此方法，您可以使用 ember-truth-helper它提供了该帮助器，但您也可以自己编写。

---

我强烈推荐第一种方法，这是处理此问题的最优雅的方法。