Ember JS - 更新组件所有实例的属性答案

【问题标题】：Ember JS - Update property on all instances of a componentEmber JS - 更新组件所有实例的属性
【发布时间】：2017-04-20 14:06:39
【问题描述】：

是否可以更新组件所有实例的属性？

如果我在一个页面上有以下组件的 10 个实例，我想将它们的 currentTrack 属性设置为 false。这可能吗？可以从其中一个组件内部完成吗？

import Ember from 'ember';

export default Ember.Component.extend({

    currentTrack: true,

});

我使用的是 Ember 2.12

【问题讨论】：

你必须自己滚动这个，我想。在init 钩子中，将实例“注册”到全局数组或其他东西中。然后提供一个类级别的方法，它会遍历所有这些并做任何你想做的事情。

标签： javascript ember.js

【解决方案1】：

您可以在此用例中使用 Ember.Evented。

这里有一个simple twiddle。

【讨论】：

【解决方案2】：

模板.hbs

{{your-component-name currentTrack=currentTrack}}
{{your-component-name currentTrack=currentTrack}}
{{your-component-name currentTrack=currentTrack}}
// btn for disabling 
<a href="#" class="btn" onclick={{action 'makeAllcurrentTracksFalse'}}>To false</a>

controller.js

currentTrack: true,
actions: {
    makeAllcurrentTracksFalse() {this.set('currentTrack', false)}
}

或在 your-component-name.js 中 - 您可以使用与上述相同的操作，它将应用于所有组件

【讨论】：

【解决方案3】：

您如何为您想要实现的目标创建条目。

const SongEntry = Ember.Object.extend({ 

});

要创建一个您会调用的条目（可能会添加一首歌曲到播放列表？）

  songs: [],

  addNewSongToList: function(songName) {
       const newEntry = MyMusicEntry.create({
           isCurrent: false,
           title: songName
       });

       this.get('songs').pushObject(newEntry);
  },

  activateNewSong: function(newSongToActivate) {
     this.get('songs').forEach(s => s.set('isCurrent', false);

     newSongToActivate.set('isCurrent', true)
  }

模板看起来像这样

 {{each songs as |song|}}
     {{my-song-component songEntry=song changeSong=(action "activateNewSong")}}
 {{/each}}

//my-song-component.js

<div class="song-layout" {{action "changeSong" song}}>

【讨论】：