親コンポーネントからコンポーネントの新しいインスタンスを作成し、DOMに注入しますか？ - Ember

Question

私は、ユーザーがボタンを押すと、コンポーネントの新しいインスタンスを生成し、それをページに追加する単純なWebアプリケーションを構築しています。

しかし、私は...テンプレート

親コンポーネントの.jsファイルからコンポーネントの新しいインスタンスを生成するかどうかはわかりません。

{{yield}} 

<div class="feed-tracks-container"> 
    {{#each model.tracks as |track|}} 
    {{#feed-card track=track}}{{/feed-card}} 
    {{/each}} 
</div> 

<div class="feed-controls-container"> 
    <div class="feed-control-container" style="width:25%" {{action (route-action "undoLastAction" track)}}> 
    <img src="images/undo-btn.png"/> 
    </div> 
    <div id="skip-btn" class="feed-control-container" style="width:25%" {{action (route-action "skipTrack" track)}}> 
    <img src="images/skip-btn.png"/> 
    </div> 
    <div id="share-btn" class="feed-control-container" style="width:25%" {{action (route-action "shareTrack" track)}}> 
    <img src="images/share-btn.png"/> 
    </div> 
    <div class="feed-control-container" style="width:25%" {{action (route-action "togglePreview" track)}}> 
    <img src="images/preview-inactive-btn.png"/> 
    </div> 
</div> 

ルート：

import Ember from 'ember'; 

export default Ember.Route.extend({ 
model: function() { 
    return { 
     tracks: [ 
     { 
      id: 1, 
      track_name: "Karate", 
      artist_name: "R3hab", 
      track_length: 230, 
      share_count: 10864, 
      background_img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3oh8ADMDG3hVZ1I_9IJumqLXJNS2-TBPrxpUdRL8J_71H5I0kyw", 
      waveform_img: "http://i.imgur.com/kP6KCJl.png" 
     }, 
     { 
      id: 2, 
      track_name: "Care", 
      artist_name: "R3hab", 
      track_length: 230, 
      share_count: 1322, 
      background_img: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS5OsXpnek1SMJzol7hYnRt9QjNEHwPf1InRAKwoWocZWvMzPqo0w", 
      waveform_img: "http://i.imgur.com/8o0AdWk.png" 
     }, 
     { 
      id: 3, 
      track_name: "Soundwave", 
      artist_name: "R3hab", 
      track_length: 230, 
      share_count: 14554, 
      background_img: "http://www.music-bazaar.com/album-images/vol17/800/800095/2652999-big/Soundwave-Extended-Mix-Single-cover.jpg", 
      waveform_img: "http://i.imgur.com/8o0AdWk.png" 
     } 
     ] 
    } 
    }, 
    actions: { 
    skipTrack: function() { 
     var new_track = { 
     id: 6, 
     track_name: "I'm new!", 
     artist_name: "R3hab", 
     track_length: 230, 
     share_count: 14554, 
     background_img: "http://www.music-bazaar.com/album-images/vol17/800/800095/2652999-big/Soundwave-Extended-Mix-Single-cover.jpg", 
     waveform_img: "http://i.imgur.com/8o0AdWk.png" 
     } 
     var tracks = this.modelFor('feed').tracks; 
     tracks.shift(); 
     tracks.pushObject(new_track); 
    }, 
    shareTrack: function() { 
     console.log("sharing"); 
    } 
    }, 
}); 

ANSWER 新しいオブジェクトを配列に挿入するときに私はpushObjectを使用していませんでした。

Answer 1

//template 
{{#each componentNames in componentName}} 
    {{component componentName data=data}} 
{{/each}} 

コントローラのcomponentNamesプロパティを変更します。 componentNames配列に追加するときに新しいコンポーネントをレンダリングする必要があります。

edit-コントローラのスワップコンポーネントです。あなたの質問に答えます。