javascript - Ractive.js 中的多维数组

Question

我一直在使用神奇的 Ractive.js 库(不要与 Facebook 的 Reactive.js 混淆)。我发现您可以使用以下模板代码渲染二维:

<div class="container">
{{ #frameContainer:i }}
    <div class="row">
    {{ #frameContainer[i] }}
        <div on-click="cell-click" class="cell {{ . ? 'on' : 'off' }}"></div>
    {{ /frameContainer[] }}
    </div>
{{ /frameContainer }}
</div>

这完全按照我的预期工作，内部cell-click事件返回正确的键路径(例如frameContainer.2.4)。

然后我想把它变成一个三维数组(添加一个“时间”轴)。但是，以下方法不起作用:

<div class="container">
{{ #frameContainer[time]:i }}
    <div class="row">
    {{ #frameContainer[time][i] }}
        <div on-click="cell-click" class="cell {{ . ? 'on' : 'off' }}"></div>
    {{ /frameContainer[][] }}
    </div>
{{ /frameContainer }}
</div>

其中 time 表示当前时间值(它一次只会显示一个“时间” - 当您这样说时，这似乎很明显......)。

这......有点作品。它按应有的方式显示网格，但 cell-click 事件返回的键路径不再正确，返回类似 ${frameContainer-time-8-}.2 - 它丢失了时间值(并且变得有点奇怪)。

显然，我可以通过使用一个 currentFrame 值来渲染并使用 ractive.set() 进行切换，但这似乎不太优雅。有没有办法纯粹在模板内完成它？如果没有，最有效的方法是什么？

谢谢!

Answer 1

这是一个相当棘手的问题。基本上，${frameContainer-time-8-} keypath 是 Ractive 唯一标识 expression 的方式，和${frameContainer-time-8-}.2表示“该表达式计算结果的第三个成员”。

这里发生的事情是这样的:当 Ractive 的解析器看到 {{ #frameContainer[time][i] }} 时部分，它解析 frameContainer[time][i]作为 JavaScript 表达式并将其转换为以下内容(您可以自己尝试 - Ractive.parse('{{#frameContainer[time][i]}}') ):

{
  r: ['i','time','frameContainer'],
  s: '${2}[${1}][${0}]'
}

渲染模板时，Ractive 会为该表达式创建一个评估器，该评估器具有从字符串(s 属性)生成的函数，并监视 time和frameContainer值(它不需要监视 i 因为它无法更改)。当这些值中的一个或两个发生更改时，函数将以它们作为参数执行。如果它返回更改的值，Ractive 需要更新 View 。

由于有一个很好的机制可以将 View 模型更改传播到 View - 键路径 - 这就是评估器使用的机制。为此，它需要创建一个唯一的键路径，因此 ${frameContainer-time-8-} (它不能包含点或方括号，因为 Ractive 会尝试在这些点或方括号上进行拆分)。

所以事情是这样的:表达式键路径是单向的。你不能这样做ractive.set('${frameContainer-time-8-}.2', 'true')就像使用常规键路径一样，因为 Ractive 无法找出对应的底层属性(或者即使有一个 - 它可能是它所知道的所有导数)。

解决方案1

最简单的解决方法可能是执行以下操作:

<div on-click="cell-click:{{time}},{{i}}" class="cell {{ . ? 'on' : 'off' }}"></div>

然后您可以使用 time和i您的 cell-click 中的值处理程序(它们将是 event 之后的第二个和第三个参数)。

我在这里做了一个简化的演示(假设我理解正确):http://jsfiddle.net/rich_harris/LYEGX/

解决方案2

另一种方法是完全取消键路径并使用适配器。我不会在这里详细介绍所有细节，因为它可能不是您正在寻找的答案，但有一些 documentation和一个example (有些链接目前已过时，抱歉......)。简而言之，此方法假设您能够在应用中使用非 POJO。