通過動作動態地添加/刪除組件到頁面

我正在創建一個FlashCard應用程序，我想動態地通過路徑中的動作將具有屬性的組件插入到視圖中。見下面的截圖，通過動作動態地添加/刪除組件到頁面

點擊「添加卡」按鈕
視圖

我想一個可能的方式來實現這一目標是動態創建一個卡編輯器組件在視圖內添加一個條件句柄塊並根據屬性狀態渲染組件;但是，我希望保持我的視圖儘可能乾淨，並認爲只有在觸發操作時才能動態地將組件呈現給視圖，情況會更好。

我的解決方案

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

在視圖的控制器

export default Ember.Controller.extend({ 
    cardEditor: false, 

    actions: { 
     addNewCardEditor() { 
      this.set('cardEditor', true)); 
     } 
    } 
});

我已經試過

基於答案How to programatically add component via controller action in ember 2.x，但它並沒有爲我工作。我得到一個錯誤，

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.

裏面查看HTML，

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

認爲路線裏面，

import Ember from 'ember'; 
import CardEditorComponent from '../../components/app/card-editor'; 

export default Ember.Route.extend({  
    actions: { 
     addNewCardEditor() { 
      CardEditorComponent.create().appendTo($('body')); 
     } 
    } 
});

組件JS裏面，

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

問題

所以我的問題是如何使用routes/home/index.js內部的操作來將組件呈現給視圖。

的查看HTML，

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

索引頁的路線，

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    actions: { 
     addNewCardEditor(newCard){} 
    } 
});

我應該把addNewCardEditor函數內部產生的對飛視圖的組成部分？

謝謝你的時間。

來源

2017-01-17 Xinyang Li

您的解決方案對我來說看起來很完美。 'card-editor'組件只會在'card-editor'爲true的情況下被實例化或渲染。我認爲你正在嘗試（以編程方式添加組件）對於你的用例來說是過分的。 IMO – kumkanillam

使用'{{#if}}'helper絕對是這個在燼中的正確解決方案。解決這個問題的唯一方法是使用路由層次結構。要以編程方式更改DOM，添加組件和類似這樣的內容是您在任何可能的情況下都應該避免的。 – Lux

在EmberCLI應用global.js

：凡要動態創建組件，即使它可能看起來像一個黑客

 

    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();

來源

2017-06-02 07:28:05 Julienm

'__container __。lookup'它的雙重私人API！ – kumkanillam

通過動作動態地添加/刪除組件到頁面

回答

相關問題