RactiveJS迭代器(for)结构

Question

我想知道，例如，如果我有number_of_fields => 2，我想显示两个这样的输入文本：

{{ # number_of_fields }}
   <input type="text" />
{{ / fields }}

这样做显然会导致一个输入，因为我传递的参数(number_of_fields)实际上是一个简单的元素。我正在尝试完成的是一个CV生成器中的“添加新字段”功能，我希望使用ractive“自动”完成，而不是手动添加一个带有JS的新element。

Answer 1

我找到了一种我认为非常有用的方法。即使在RactiveJS中有任何“简单”或自然的方法来做for，我们可能仍然需要binding或controlling数据，所以如果我们有这样的数据：

{{ # fields_number:num }} {{ / fields }}

这是一个非常糟糕的绑定这些值的方法，我相信我们都同意。现在，我刚才在这里问的https://stackoverflow.com/questions/25460380/也是同样的情况。

但是我突然想到了!

我想过有一个x null values的array，在我的例子中，x将是number of inputs。

...
data : {
    groups : [ 'group1', 'group2', ...],
    fields : { 
        group1 : [ null, null ],
        group2 : [ null, null, null ],
        ...
}
...

这样可以更容易地将数据直接绑定到这些值中，如下所示：

{{ # groups:number }}
    <div id="{{ . }}">
        {{ # fields[ groups[ number ] ]:index }}
            <input type="text" value="{{ fields[ groups[ number ] ][ index ] }}" />
        {{ / fields }}
    </div>
{{ / groups }}

现在，您有了一个ractive.get( 'fields' )完全绑定的数据:)。希望这能有所帮助！