Ember.js 余烬液栓模态

我正在使用-

向下滚动至“带上下文的动画”。我已经在这些页面上输入了代码

我得到一个错误：没有定义gte

模板.hbs

<div class="example-button-container">
  <button {{action "openModalDialog"}}>
    Open Dialog
  </button>
</div>

{{#if showFirstModalDialog}}
  {{#liquid-tether
    to="modal-dialog"
    target="document.body"
    targetModifier="visible"
    attachment="middle center"
    tetherClass="modal-dialog"
    overlayClass="modal-backdrop"}}
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
      </div>

      <div class="modal-body">
        <p>Here's a modal!</p>
      </div>

      <div class="modal-footer">
        <button {{action "closeModalDialog"}}>Cancel</button>
        <button {{action "nextModalDialog"}}>Next</button>
      </div>
    </div>
  {{/liquid-tether}}
{{/if}}

{{#if showSecondModalDialog}}
  {{#liquid-tether
    to="modal-dialog"
    target="document.body"
    targetModifier="visible"
    attachment="middle center"
    tetherClass="modal-dialog"
    overlayClass="modal-backdrop"}}
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Another Modal</h4>
      </div>

      <div class="modal-body">
        <p>
          This modal came in from the right instead of fading. The next modal
          will also slide in from the right, while the previous modal will slide
          in from the left, maintaing spacial context.
        </p>
      </div>

      <div class="modal-footer">
        <button {{action "prevModalDialog"}}>Back</button>
        <button {{action "nextModalDialog"}}>Next</button>
      </div>
    </div>
  {{/liquid-tether}}
{{/if}}

{{#if showThirdModalDialog}}
  {{#liquid-tether
    to="modal-dialog"
    target="document.body"
    targetModifier="visible"
    attachment="middle center"
    tetherClass="modal-dialog"
    overlayClass="modal-backdrop"}}
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Another Modal</h4>
      </div>

      <div class="modal-body">
        <p>
          This is the last modal! It'll fade out when you finish the dialog.
        </p>
      </div>

      <div class="modal-footer">
        <button {{action "prevModalDialog"}}>Back</button>
        <button {{action "closeModalDialog"}}>Finish</button>
      </div>
    </div>
  {{/liquid-tether}}
{{/if}}

mytransitions.js：

this.transition(
  target('modal-dialog'),
  this.toValue(({ index: newIndex }, { index: oldIndex }) => newIndex > oldIndex),
  this.use('tether', ['to-left', options]),
  this.reverse('tether', ['to-right', options])
);

this.transition(
  target('modal-dialog'),
  this.toValue(({ index }) => index === 1),
  this.use('tether', 'fade', 'fade')
);

this.transition(
  target('modal-dialog'),
  this.toValue(({ index }) => !index),
  this.use('tether', 'fade', 'fade')
);

---

难道你没有忘记导入

Ember.computed.gte

import Ember from 'ember';
const gte = Ember.computed.gte;  

export default Ember.Controller.extend({
      showFirstModalDialog: gte('currentModalDialogStep', 1),
      showSecondModalDialog: gte('currentModalDialogStep', 2),
      showThirdModalDialog: gte('currentModalDialogStep', 3),

      actions: {
        openModalDialog() {
          this.set('currentModalDialogStep', 1);
        },

        prevModalDialog() {
          this.decrementProperty('currentModalDialogStep');
        },

        nextModalDialog() {
          this.incrementProperty('currentModalDialogStep');
        },

        closeModalDialog() {
          this.set('currentModalDialogStep', 0);
        }
      }
    });

---

现在错误消失了，但我得到了一个黑色页面，而不是模式显示。有什么想法吗？非常感谢！我没有使用这个插件的经验，但是，我会开始查看控制台（任何错误输出？），检查DOM（模态块是否存在？CSS是否正常？）。没有任何错误。我使用google chrome/developer工具，在扩展div负载后，发现z-index与model重叠。。。。投票认为您的评论有助于您的努力：-）

import Ember from 'ember';
const gte = Ember.computed.gte;  

export default Ember.Controller.extend({
      showFirstModalDialog: gte('currentModalDialogStep', 1),
      showSecondModalDialog: gte('currentModalDialogStep', 2),
      showThirdModalDialog: gte('currentModalDialogStep', 3),

      actions: {
        openModalDialog() {
          this.set('currentModalDialogStep', 1);
        },

        prevModalDialog() {
          this.decrementProperty('currentModalDialogStep');
        },

        nextModalDialog() {
          this.incrementProperty('currentModalDialogStep');
        },

        closeModalDialog() {
          this.set('currentModalDialogStep', 0);
        }
      }
    });