從父組件構建組件的新實例並將其注入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-swap控制器的組件，它回答你的問題。