アクションでページにコンポーネントを動的に追加/削除する

Question

私はFlashCardアプリケーションを作成していますが、プロパティ内のコンポーネントをルート内のアクションを介してビューに動的に挿入したいと思います。

が動的に私はこれを達成するための1つの可能な方法はにあると思い

ビューでカードエディタコンポーネントを作成ボタン

1. をクリックして、「カードを追加」、下のスクリーンショットを参照してください。ビュー内に条件付きハンドルバーブロックを追加し、プロパティ状態に基づいてコンポーネントをレンダリングします。しかし、私は可能な限り私のビューをきれいに保ちたいと思うし、アクションがトリガされたときにのみビューにコンポーネントをレンダリングできる方が良いと思う。ビューのコントローラ

   export default Ember.Controller.extend({ 
       cardEditor: false, 
   
       actions: { 
        addNewCardEditor() { 
         this.set('cardEditor', true)); 
        } 
       } 
   }); 
   

   で

   私のソリューション

   <div style="margin-left: 200px;"> 
       {{#if cardEditor}} 
        {{app/card-editor}} 
       {{/if}} 
   </div> 
   

   私は答えHow to programatically add component via controller action in ember 2.xに基づいて

   を試してみましたが、それは私のために動作しません何。私は、コンポーネントJS内部

   import Ember from 'ember'; 
   import CardEditorComponent from '../../components/app/card-editor'; 
   
   export default Ember.Route.extend({  
       actions: { 
        addNewCardEditor() { 
         CardEditorComponent.create().appendTo($('body')); 
        } 
       } 
   }); 
   

   、ビューのルート内

   {{app/side-bar 
       addNewCardPressed='addNewCardEditor' 
   }} 
   

   、ビューのHTML内

   ember.debug.js:41417 Uncaught Error: Cannot instantiate a component without a renderer. Please ensure that you are creating <(subclass of Ember.Component):ember604> with a proper container/registry. 
   

   、

   actions: { 
       addNewCardPressed() { 
        this.sendAction('addNewCardPressed'); 
       } 
   } 
   

   質問のエラーを取得します

   私の質問は、routes/home/index.js内のアクションを使用して、コンポーネントをビューにレンダリングする方法です。

   ビューHTML、

   {{side-bar 
       addNewCardPressed='addNewCardEditor' 
   }} 
   

   インデックスページルート、私はその場でビューでコンポーネントを生成するaddNewCardEditor関数内に置く必要がありますどのような

   import Ember from 'ember'; 
   
   export default Ember.Route.extend({ 
       actions: { 
        addNewCardEditor(newCard){} 
       } 
   }); 
   

   ？

   お時間をいただきありがとうございます。あなたのEmberCLIアプリケーションのglobal.jsで

Answer 1

：あなたは動的にコンポーネントを作成したい

 

    export function initialize(application) { 
     window.EmberApp = application; // or window.Whatever 
    } 

、それはハックのように見える場合でも、に頼らずにそれを行うためのクリーンな方法があるかもしれませんEmberCLI変数。 以下の「アプリケーション」は、application.jsで定義するグローバルEmberCLIアプリケーションのネームスペースです。

 

    var component = App.CardEditorComponent.extend({ 
     renderer: window.EmberApp.__container__.lookup('renderer:-dom'), 
    }).create(); 

    Ember.setOwner(component , window.EmberApp); 
    component.append();