ember 液体系链模态

Question

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

向下滚动到 'Animation With Context'。我已经把代码放在这些页面上了。

我收到错误：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);
        }
      }
    });

ember 液体系链模态

ember liquid-tether modals

ember.js

ember-cli