1

我有一个父组件名称-card -mode

**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 方法来渲染一个组件。

直到这个它工作正常。

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

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

但是当我再次尝试调用 child-page-2 时,不会再次调用 child-page-2 初始化函数。

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

我的问题:

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

4

1 回答 1

0

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

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

在此处输入图像描述

建议:

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

样本HBS

{{child-page
        currentPage=3
        property1='something'
        property2='something'
}}
于 2017-02-15T23:56:57.390 回答