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文件从＆＃39; ember＆＃39;;

导入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中，不应再使用true版本了！

首先，我假设您按照以下方式调用组件：

bind-attr

我强烈建议您不要拨打您的数据{{my-component model=rooms}}！给他们一个发言名。做model之类的事情！

所以现在你在你的组件中。您可能想到的问题是问题是您的rooms=rooms循环，导致您在{{#each}}循环内的上下文没有.js文件的情况。

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

{{#each}}

然后，您可以将{{#each model as |room|}} {{room-line room=room currentRoomId=currentRoomId}} {{/each}}正文放在{{#each}}：

中

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。这可以使用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(=);

如果您选择此approch，您可以使用ember-truth-helper提供帮助，但您也可以自己编写。

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

Answer 2

最简单的方法是使用ember-truth-helpers，它会在模板中为您提供非常有用的eq帮助器。然后你可以写：

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

这是在您的类属性中使用嵌入式if助手而不是bind-attr（which is deprecated and you should avoid）。

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

2 个答案: