Ember Liquid Fire的{{liquid-with}}助手的方向感知轉換

在我的Ember應用程序中，當動態路線的模型發生變化時，我想在相同的路線中製作漂亮的Liquid Fire轉場。這裏是我的路由器：Ember Liquid Fire的{{liquid-with}}助手的方向感知轉換

// 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文件，但愛德華·福克納（液體滅火的作者）說in this thread是

液體出口不處理模型TO-在同一路線

，我應該用{{liquid-with}}，而不是模型的轉變。然而，我不知道如何處理方向性問題，也就是說，當election_year增加時，視圖會向左移動，當它減少時向右移動。任何線索？

來源

2015-06-08 cwarny

也許你可以修改液體寬度的'use'參數： '{{＃liquid-with campaigns use campaign = direction}}'（設置'direction'爲'toLeft'或'toRight' ） – enspandi

這是否意味着我將不得不向計算控制器添加一些計算屬性'direction'？但是，該房產如何知道'vot_year'是增加還是減少？ – cwarny

'willTransition'掛鉤可以改變'direction'屬性：http://emberjs.com/api/classes/Ember.Route.html#event_willTransition – enspandi

當使用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」匹配時使用的動畫（toRight），

所有規則約束（包括toValue，fromRoute等）可以接受：

簡單的值等toValue(42)或toRoute('posts')，將與===
正則表達式等toRoute(/unicorn/)
函數測試值，像toValue(n => n > 1)進行比較。

函數比較值和「其他值」，如

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

最後一種情況是我們使用什麼樣的解決方案上面。我們應該爲比較規則添加一個明確的名字，比如，而不是僅僅重載toValue來做比較，但是這不會影響你的解決方案，因爲我不打算在可預見的將來破壞現有的行爲。）

來源

2015-06-08 19:37:26 Ed4

優秀的答案。有沒有一種方法可以根據用戶輸入進行轉換？我想在用戶點擊「上一步」按鈕的「下一步」按鈕和「到右側」過渡時進行「toLeft」轉換。 – bummzack

像我上面描述的那樣做更容易，更具前途。您必須有足夠的信息來知道當前模型的下一個模型，因此您可以通過查看兩個模型來測試。 – Ed4

這樣，即使您更改了用戶界面，其意圖仍然保留。還要考慮到用戶可以通過後退按鈕進行導航，在這種情況下，從不會點擊「前一個」按鈕。 – Ed4

Ember Liquid Fire的{{liquid-with}}助手的方向感知轉換

回答

相關問題