动态变量名绑定

Question

我遇到了类似于 this one 的问题。但在我的例子中，有动态数量的对象（帖子）要绑定，所以如果我这样做：

{{#each Posts}}
...
  {{#each Comments}}
  {{/each}}
  <form> /* new comment is added here */
    <textarea name="text" value="{{newCommentText}}" />
    <input type="submit" disabled="{{!newCommentText}}" />
  </form>
{{/each}}

所有文本区域的值都已同步。我需要的是以某种方式为每个表单指定一个唯一的变量名称（即 {{PostId_newCommentText}}）。有办法实现吗？

Answer 1

您可以使用restricted references将每个新评论添加到相应的Post:

{{#each Posts}}
    <form>
        <!-- .newCommentText === this.newCommentText -->
        <textarea name="text" value="{{.newCommentText}}" />
        <input type="submit" disabled="{{!.newCommentText}}" />
    </form>
{{/each}}

另一种选择是使用 @index 并将所有新评论存储在单独的数组中：

{{#each Posts}}
    <form>
        <textarea name="text" value="{{NewComments[@index]}}" />
        <input type="submit" disabled="{{!NewComments[@index]}}" />
    </form>
{{/each}}

现场演示 here。

动态变量名绑定

Dynamic variable name binding

ractivejs