ember liquid-tether modals

Question

我正在使用 - http://pzuraq.github.io/liquid-tether/#/examples?a=hello-world

向下滚动到＆＃39;动画与上下文＆＃39;。我把代码放在这些页面上。

我收到错误：未定义gte。

template.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}}

mycontroller.js

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

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')
);

Answer 1

您是否忘记导入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);
        }
      }
    });