如何在没有控制器余烬的情况下在另一个组件内重新渲染子组件

时间:2017-02-14 06:33:43

标签: ember.js components render ember-components rerender

我有一个父组件名称 - 卡片模式

**card-mode.js**
import Ember from 'ember';

export default Ember.Component.extend({
    card: null,
    previousPage: null,
    nextPage: null,
    init(){
        this._super(...arguments);

        if(this.get('errand').selectedMeasure != null){
            this.setCard("page/card/measure-master-summary");
        }
    },
    setCard(card){
        this.set('card', card);
    },
    actions: {
        setCard(name){
          this.setCard(name);
        },
        next(name){
            console.log(name);
            this.setCard(name);
        },
        previous(name){
            console.log(name);
            this.setCard(name);

        },
    }
});

**card-mode.hbs**
<div>
{{component card setCard=(action 'setCard') }}
</div>
<div>
<a href="#" class="btn btn-primary padding-lr" onclick={{action "previous" previousPage}}>previous<i class="fa fa-arrow-circle-right"></i></a> 
<a href="#" class="btn btn-primary padding-lr npc" onclick={{action "next" nextPage}}>Next <i class="fa fa-arrow-circle-right"></i></a> 
</div>

在此卡模式组件中,我将通过调用setcard方法呈现组件。

直到这样它才能正常工作。

但是现在,我必须在父组件中多次渲染相同的子组件。

Think child-page-1,child-page-2是应该在父组件中呈现的两个子组件。当使用上一个和下一个动作调用它们时,child-page-1和child-page-2会完美呈现。

但是当我再次尝试调用child-page-2时,再次没有调用child-page-2 init函数。

child-page-2.js

export default Ember.Component.extend({

    errand: Ember.inject.service(),
    selectedDimensionAnalysis: null,
    analysisTable:null,

    init(){
        this._super(...arguments);
        this.parentView.set('nextPage','child-page-1');
        this.parentView.set('previousPage','child-page-2');

        // results that will be displayed - 
        //results will be varied everytime based on the number of times it is called
    },
});

我的问题:

我应该如何重新渲染子组件。我没有使用任何控制器和模型,因为我不需要它们。

1 个答案:

答案 0 :(得分:0)

您错误地认为没有控制器。如果您没有为您定义一个Ember generates

如果安装Ember Inspector,您可以看到存在哪些控制器 https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en

enter image description here

<强>建议:

如果组件添加到手柄HBS文件中,则可以多次呈现该组件。实例化一个新组件,并从父项中传入您希望它使用的属性。

示例HBS

{{child-page
        currentPage=3
        property1='something'
        property2='something'
}}