Javascript Ember.js为特定模型id添加css类_Javascript_Html_Css_Ember.js

Javascript Ember.js为特定模型id添加css类

javascript html css ember.js

Javascript Ember.js为特定模型id添加css类,javascript,html,css,ember.js,Javascript,Html,Css,Ember.js,我正在开发聊天应用程序。我有组件室的模板 <div class='border rooms'> <button class="add-room-container"> <div >Add room</div> </button> {{#each model as |room|}} <button class="room-container" {{acti

我正在开发聊天应用程序。我有组件室的模板

<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>

} });

我对线路有问题

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

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

我试图设置动态属性，但我不知道如何从组件中访问当前模型（房间）id，然后像在模板中那样比较它。最简单的方法是使用，它为您提供了模板中非常有用的

eq

帮助器。然后你可以写：

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

{{{#每个模型作为|房间}
{{/每个}}

这是在类属性中使用嵌入的

if

帮助程序，而不是

bind attr

（）。

最简单的方法是使用，它在模板中为您提供了非常有用的

eq

帮助程序。然后你可以写：

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

{{{#每个模型作为|房间}
{{/每个}}

这是在类属性中使用嵌入的

if

helper，而不是

bind attr

（）。

您有许多不同的方法来实现这一点。但首先，问题是您使用的是什么版本的余烬。在当前的余烬版本中，

bind attr

不应再使用

首先，我假设您这样调用组件：

{{my-component model=rooms}}

我强烈建议不要调用您的数据

模型

！给他们一个会说话的名字。做一些类似于

rooms=rooms

的事情

现在您已经在组件中了。您可能发现问题在于

{{{each}}

循环，这导致

{{{each}}

循环中没有

.js

文件作为上下文

最好的解决方法是使用第二个组件，在每个循环中调用：

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

然后你可以把你的

{{{{each}}

身体放在你的

房间里。hbs

：

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

另一种处理方法是将

isCurrentRoom

注入您的

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}}

然后您可以在模板中使用它：

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

{{{#每个房间都计算为|房间}
...
{{/每个}}

如果您选择这种方法，您可以使用它来提供帮助，但您也可以自己编写

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

你有很多不同的方法。但首先，问题是您使用的是什么版本的余烬。在当前的余烬版本中，

bind attr