Question

我有一个组件，但是我想添加一个选项，它会延迟模板在指定时间内的呈现，即：

{{pre-loader radius=60 delay=2000 message="Page is loading data"}}

组件模板：

<svg class="spinner" width="{{size}}px" height="{{size}}px" viewBox="0 0 {{viewBoxSize}} {{viewBoxSize}}" xmlns="http://www.w3.org/2000/svg">
  <circle class="path" fill="none" stroke-width="{{strokeWidth}}" stroke-linecap="round" cx="{{halfViewBoxSize}}" cy="{{halfViewBoxSize}}" r="{{radius}}"></circle>
</svg>
{{#if (is-greater-than message.length 0)}}
  <div class='loading-message'>
    <p>{{message}}</p>
  </div>
{{/if}}

我有一个工作解决方案，我将在下面发布作为答案，但我欢迎一种更好的方法，而不是在模板本身中使用{{if}}。

Answer 1

我的解决方案有两个方面：

1）在整个模板周围添加一个if：

{{#if delayComplete}}
  ...
{{/if}}

2）将以下代码添加到我的组件的javascript中：

export default Ember.Component.extend({
  init: function() {
    this._super();

    this.set('_wasDelayed', false);
  },
  delayComplete: Ember.computed({
    set(key, val) {
      return val;
    },
    get() {
      var delay = this.get('delay');
      var wasDelayed = this.get('_wasDelayed');

      if (delay && !wasDelayed) {
        this.set('_wasDelayed', true);

        this.startDelayPolling(delay);

        return false;
      }
      else {
        return true;
      }
    }
  }),
  startDelayPolling: function(delay) {
    this._poller = Ember.run.later(this, () => {
      this.set('delayComplete', true);
    }, delay);
  },
  stopDelayPolling: function() {
    Ember.run.cancel(this._poller);
  },
  willDestroy: function() {
    this._super(...arguments);
    this.stopDelayPolling();
  },
  ...
});

即。 delayComplete是一个计算器，它设置一个定时器，以便在指定延迟时自行更新。还要添加willDestroy来处理计时器仍在运行但组件被破坏的情况。

延迟在Ember中呈现组件模板指定的时间？

1 个答案: