延遲的流星html更新

Question

我有一個球員的列表，其中每個球員都有一個狀態。我們爲了通過圖標的狀態播放器以及顯示狀態，像這樣：

我需要使它所以當你點擊一個球員，他們馬上改變狀態圖標，但訂單沒有按直到延遲後（對於UX原因）纔會改變。任何想法，以最好的方式來做到這一點。

這裏的一些想法是行不通的：

1. 更改player.status馬上（根據您的訂單的變化）。

2. 延時更改player.status超時（圖標不會立即改變，感覺沒有任何事情發生）。

3. 通過jQuery做＃2和更改圖標類：如果你做了一些更改，延遲更新將重繪，你將失去你設置的類。

最好的想法，我有（我知道這是很糟糕）是：

做＃2，但使用每播放一個會話變量（Session.get("player-$ID-status") ）來存儲狀態的最新版本。

會有一些令人討厭的管道工作，但我認爲它會。我很樂意聽到更好的方式（或'流星'）來做到這一點。

Answer 1

我認爲有幾個更微妙的方法來完成你所需要的。一種方式會導致用戶行爲和變化狀態之間的某種耦合。第二種方式是更加分離和優雅的方法，這將更符合流星方式。

首先，有點緊耦合的方式：

你知道，在您的使用情況下，球員應該變化到一個新的狀態，當用戶表示，他們希望出現的變化。我認爲這裏的關鍵在於有一個插頁式狀態，其中球員將更改爲狀態。

鑑於此故障，您可以用兩種屬性模擬這種行爲：

player.status和player.statusWillBe

如果以這種方式實現它，你便可以立足圖標關閉player.changingToStatus，並且排序關閉player.status 。

這意味着所有玩家將從player.status和player.statusWillBe開始使用相同的值 - 然後將根據player.statusWillBe中的值正確設置圖標。

通過這種細分，您可以非常細緻地控制基於用戶交互的行爲，但是您的ui響應與用戶行爲和非ui組件密切相關。如果你繼續使用這種方法，這可能會很快變得醜陋。你基本上將模型/狀態與UI混合在一起。

更復雜的分離方法（和與流星方式線）：

供玩家狀態的變化實現一個狀態機。然後你可以在變化的水平上捕捉狀態變化。在狀態改變後，您將invalidate a context導致您的用戶界面重新繪製。這種方法更清潔，因爲它可以將你的用戶界面從你的「模型」中徹底解耦。根據底層模型的變化，流星上下文及其失效是客戶端重新繪製的關鍵，而不會將兩者緊密結合。

我也強烈建議以下截屏，以幫助您更好地瞭解這種模式：Meteor reactivity with contexts.