Question

我称之为这样的组件：

  {{Gd-text-input label="Specify" name="Specify" key="entry.810220554" triggerKey="tada" hideIf="Client"}}

我想运行一些javascript代码，为该组件设置一个额外的属性。

我正在尝试运行的是这样的

//Convert string ot array.
GdRadioInput = Em.Component.extend({
    init: function(){
        var cs = this.get('contentString');
        console.log('doesthiswork?');
        if(cs){
            this.set('content', eval(cs));
        }
    }
});

但它没有运行。如果有人可以提供一个示例，即每当创建该组件时，console.logs会显示组件属性的值，这将非常有用。

Answer 1

您可以在init方法

中运行此代码

init:function(){
    this._super();
    hideIf = this.get('hideIf');
    key = this.get('key')
        if(hideIf === key){
              this.set('class', 'hide');
        }
    }

祝你好运

PD：现在这种方法是私有的：http://emberjs.com/api/classes/Ember.Component.html#method_init

Answer 2

我知道这是一个老问题，但我想用新方法来更新它。您现在可以使函数在init初始化时运行，而不是覆盖.on('init')函数。例如：

GdRadioInput = Em.Component.extend({
    setupFunc: function(){
        var cs = this.get('contentString');
        console.log('doesthiswork?');
        if(cs){
            this.set('content', eval(cs));
        }
    }.on('init')
});

Answer 3

后续跟进：如果您依赖于完全加载的DOM树，则可以使用.on('didInsertElement')代替on('init')：

GdRadioInput = Em.Component.extend({
    setupFunc: function(){
        var cs = this.get('contentString');
        console.log('doesthiswork?');
        if(cs){
            this.set('content', eval(cs));
        }
    }.on('didInsertElement')
});

将视图元素插入DOM时会触发该事件：http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement

在实例化Ember组件时执行某些操作？

3 个答案: