ember-cli - 向 Ember CLI 项目添加 Liquid Fire，{{liquid-outlet}} 什么也不做

Question

我最近按照本教程中的以下步骤概述将 Liquid Fire 添加到我的 Ember CLI 0.2.3 项目中:http://www.programwitherik.com/doing-animations-and-transitions-with-liquid-fire-and-ember/

我用 npm install --save-dev Liquid-fire 添加了 Liquid Fire。我使用教程中概述的代码添加了一个 transitions.js 文件。我用 {{liquid-outlet}} 替换了 {{outlet}}。没事了。什么都没有发生。日志或控制台中没有错误， socket 所在的位置也没有显示任何内容。我已经完全按照教程所说的进行了尝试。我是否缺少使 {{liquid-outlet}} 工作的步骤？

Answer 1

我遇到过同样的问题。我的问题是我没有使用正确的路线名称。

我启用了 ENV.APP.LOG_TRANSITIONS = true; /config/environment.js 中的选项.这会在转换时在控制台中打印路由名称，这有助于我在 /app/transitions.js 中编写正确的转换.还要确保添加 {{liquid-outlet}}嵌套路由时发送到您的所有 socket 。

这是我的 transitions.js文件:

export default function(){
    this.transition(
        this.fromRoute('dashboard'),
        this.toRoute('bots'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('bots.bot'),
        this.toRoute('bots.create'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('bots.bot'),
        this.toRoute('bots.index'),
        this.use('toRight'),
        this.reverse('toLeft')
    );

    this.transition(
        this.fromRoute('bots.bot.index'),
        this.toRoute('bots.bot.edit'),
        this.use('toLeft'),
        this.reverse('toRight')
    );

    this.transition(
        this.fromRoute('bots.bot'),
        this.toRoute('bots.bot.edit'),
        this.use('toDown'),
        this.reverse('toUp')
    );
}