Question

在我的Ember应用程序中，当动态路径的模型发生变化时，我想在同一路径中进行漂亮的Liquid Fire过渡。这是我的路由器：

// app/router.js

Router.map(function() {
    this.route("campaigns", { path: "/" }, function() {
        this.route("campaign", { path: "/campaign/:election_year" });
    });
});

我希望视图在切换到将来的election_year时（例如，从campaign/2008到campaign/2012）向右移动屏幕左侧另一种方式。

我的第一个想法是使用{{liquid-outlet}}文件中的toModel和app/transitions.js函数，但Edward Faulkner（Liquid Fire的创建者）说in this thread < / p>

液体出口不能处理模型到模型的转换路线

我应该使用{{liquid-with}}代替。然而，我不知道如何处理方向性，即在election_year增加时使视图向左移动，在减少时向右移动。有线索吗？

Answer 1

使用liquid-with（或liquid-bind）助手时，动画中不一定涉及路线或模型，因此toRoute或toModel等约束会不适用。相反，您可以使用toValue来匹配您传递给帮助者的任何内容。

假设您将Campaign模型传递给liquid-with，您可以在transitions.js中使用这样的规则：

this.transition(
  this.toValue(function(newValue, oldValue) {
    return newValue instanceof Campaign &&
           oldValue instanceof Campaign &&
           newValue.electionYear > oldValue.electionYear
  }),
  this.use('toLeft'),
  this.reverse('toRight')
)

说明：

我们有一个约束，一个匹配时使用的动画（toLeft），以及一个与“to”和“from”reverse（toRight）匹配时使用的动画，

所有规则限制（包括toValue，fromRoute等）都可以接受：

简单值，例如toValue(42)或toRoute('posts')，将与===进行比较
正常表达式，例如toRoute(/unicorn/)
测试值的函数，如toValue(n => n > 1)。

比较值和“其他值”的函数，如

toValue((newThing, oldThing) => newThing.betterThan(oldThing))

最后一个案例是我们在上述解决方案中使用的内容。

（我们正在继续优化这些API。在这种特殊情况下，我认为我们应该为比较规则添加一个明确的名称，例如this.compareValues(function(oldValue, newValue){...})，而不是仅仅重载toValue来进行比较但这不应该影响你的解决方案，因为我不打算在可预见的未来打破现有行为。）

使用Ember Liquid Fire的{{liquid-with}}助手进行方向感知转换

1 个答案: