Question

我是新来的。在页面之间使用液体火焰滑动。但是想添加一个过渡到我的余烬模态。

我想淡入 - 就像这样 - http://ember-animation.github.io/liquid-fire/#/modals（见页面底部）。

我的代码：应用程序/模板/组件/你好-modal.hbs：

<div>{{salutation}} {{person}}!</div>
<div>{{input value=message class="modal-input"}}</div>
<button {{action "gotIt"}} class="done">Thanks</button>
<button {{action "change"}} class="change">Change</button>

应用/组件/你好-modal.js：

export default Ember.Component.extend({
  classNames: ['hello-modal'],
  actions: {
    gotIt: function() {
      this.sendAction('dismiss');
    },
    change: function() {
      this.sendAction('changeSalutation');
    }
  }
});

第3步（从链接中的示例中可以看出）： '在您的路由器地图中调用模态（），无论您选择哪个范围并连接任何操作：'

不确定我明白这一点。但我把它添加到我的杯形蛋糕路由器中：

router.js

Router.map(function() {

            this.route('device');
            this.route('cupcakes', function() {
              this.modal('hello-modal', {
                withParams: ['salutation', 'person'],
                otherParams: {
                  modalMessage: "message"
                },
                actions: {
                  changeSalutation: "changeSalutation"
                }
              });        

    });

cupcakes.hbs

{{#link-to (query-params salutation="Guten tag" person="Stef") tagName="button"}}
    Try It
{{/link-to}}

控制器/ cupcakes.js：

export default Ember.Controller.extend({
  queryParams: ['salutation', 'person'],
  salutation: null,
  person: null,
  modalMessage: "bound text for modal",
});

当我在cupcakes.hbs上单击“试试”时没有任何反应。控制台中没有显示错误消息。

Answer 1

您是否已将{{liquid-modal}}添加到 templates / application.hbs 文件中？

我的application.hbs看起来像这样：

// templates/application.hbs
{{outlet}}
{{liquid-modal}}

ember模态对话液体火

1 个答案: