Question

我正在创建一个按钮组件，在单击inspired by this fiddle here时会有一个加载组件。

以下把手显示组件：

{{#if 'hasSpinner'}}
    <span class="spinner fa-spin icon-refresh"></span>
{{/if}}
{{#if 'hasFailureCross'}}
    <span class="failure-cross glyphicon glyphicon-remove"></span>
{{/if}}
{{#if 'hasSuccessTick'}}
    <span class="success-tick glyphicon glyphicon-ok"></span>
{{/if}}
{{buttonText}}

这是组件类：

// shows a button with a spinner
App.AppButtonProgressComponent = Em.Component.extend({
    //defaults
    buttonType: 'btn-default',

    //you can choose whether or not to have the following elements
    hasSpinner: true,
    hasFailureCross: false,
    hasSuccessCross: false,

    //when these are active, the css kicks in and adds the icons to the button
    spinner: false,
    failureCross: false,
    successTick: false,

    actions: {
        click: function() {
            this.set('spinner', true);
            this.sendAction();
        },
        showFailure: function() {
            console.log('should show cross or something');
            this.set('spinner', false);
            this.set('failureCross', true);
        },
        showSuccess: function() {
            console.log('should show success');
            this.set('spinner', false);
            this.set('successTick', true);
        },
        reset: function() {
            this.set('spinner', false);
            this.set('successTick', false);
            this.set('failureCross', false);
        }
    },
    tagName: 'button',
    classNames: ['btn'],
    classNameBindings: ['buttonType', 'spinner', 'failureCross', 'successTick']
});

因此，处理状态是在父视图控制器中实现状态变量的问题。我如何从组件外部调用这些功能？说如果单击按钮，将微调器设置为true并导致加载符号，如果获取冒泡到控制器的请求失败或成功，我将如何调用组件的showSuccess或showFailure方法

我对组件的理解不正确吗？是否有更好的方法来实现这一目标？

更新：我仍在研究该组件，并打算向公众发布经过测试和完成的元素。

Answer 1

组件是单向设备。话虽如此，您可以使用sendAction发送参数并依赖该操作来进行回调。这将责任放在父操作上，但它允许您在适当的时候与组件进行交互。

我已经为您创建的内容创建了一个dummied down版本，并修改了一些内容以显示该概念。

    showFailure: function() {
        console.log('should show cross or something');
        this.set('spinner', false);

        this.set('failureCross', true);
    },
    showSuccess: function() {
        console.log('should show success');
        this.set('spinner', false);
        this.set('successTick', true);
    },
    reset: function() {
        this.set('spinner', false);
        this.set('successTick', false);
        this.set('failureCross', false);
    },
    actions:{
      click: function() {
        var self = this;
          this.set('spinner', true);

        this.sendAction('action', 
            function(){ self.showFailure(); },
            function(){ self.showSuccess(); },
            function(){ self.reset(); }
                       );
    }

然后在收到回调的父动作中

actions:{
    doit: function(failure, success, reset){
      Ember.run.later(function(){
         // call reject 1 second later for visual effects
         // as if we made a call to the server
         failure();
      }, 1000);
    }
  }

http://emberjs.jsbin.com/qumupaxa/1/edit

在余烬中具有不同状态的自定义按钮

1 个答案: