從父組件構建組件的新實例並將其注入DOM？ -灰燼

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");
    }
  },
});

解答將新對象插入數組時，我沒有使用pushObject 。

Answer 1

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

在您的控制器中更改componentNames屬性。 當您添加到componentNames數組時，應該呈現一個新組件。

編輯控制器的交換組件，它回答了您的問題。