Ember JS - コンポーネントのすべてのインスタンスのプロパティを更新します。

Question

コンポーネントのすべてのインスタンスのプロパティを更新できますか？

ページ上に以下のコンポーネントのインスタンスが10個ある場合は、すべてのコンポーネントでcurrentTrackプロパティをfalseに設定したいと考えています。これは可能ですか？ 1つのコンポーネントの内部から行うことはできますか？私はあなたがこのユースケースのためEmber.Eventedを使用することができますエンバー2.12

Answer 1

使用してい

import Ember from 'ember'; 

export default Ember.Component.extend({ 

    currentTrack: true, 

}); 

。

ここにはsimple twiddleがあります。

Answer 2

template.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)} 
} 

たり、成分-name.jsで - あなたは上記と同じアクションを使用することができますし、それがすべてに適用されますあなたについてyour'reを達成しようと、これまでどのようなもののためにエントリを作成する方法コンポーネント

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

次のようになります.js

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