流星中延迟的html更新

Question

我有一个玩家列表，每个玩家都有一个状态。我们按状态订购玩家，并通过如下图标显示状态：

我需要在点击播放器时这样做，他们会立即更改状态图标，但是在延迟之后订单不会改变（出于UX原因）。关于最佳方法的任何想法。

以下是一些不起作用的想法：

1. 立即更改player.status（订单在您下方更改）。

2. 延迟更改player.status超时（图标不会立即改变，感觉没有发生任何事情）。

3. 执行＃2并通过jQuery更改图标类：如果您进行了一些更改，延迟更新将重绘并且您将丢失您设置的类。

我最好的想法（而且我知道它非常糟糕）是：

1. 执行＃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导致你的ui重绘。这种方法更清晰，因为它会将你的ui与你的“模型”完全分离。根据底层模型的变化，Meteor上下文及其失效是客户端ui重绘的关键，而不是将两者紧密耦合。

我还强烈建议使用以下截屏视频来帮助您更好地理解这种模式：Meteor reactivity with contexts.