javascript - 如何在 Meteor 中对带有输入单元格表的表单进行响应式(Reactive)绑定(bind)？

Question

我正在尝试创建一个 Web 应用程序来处理任意大小的数字的 2D 矩形表。每个表都是一个文档(存储在集合中，并由用户彼此共享)。最终，我想将其扩展到任意数量的维度，但 2D 已经给我带来了麻烦。目前我的数据存储为

{dimensions: [2,3],
data: [2, 3, 5, 7, 11, 13]}

但我认为将 UI 代码编写为数组的数组会更容易

[[2, 3, 5],
[7, 11, 13]]

对于我来说，在其他地方执行这种转换很容易。

我一直在致力于一个玩具实现，以让我的头脑围绕 react 部分，而不增加集合和用户帐户的复杂性。硬编码的 2x3 版本位于 https://github.com/scentoni/meteor-grid具有双 {{#each}} 的版本在 https://github.com/scentoni/meteor-grid/tree/loopcell 处循环关键点在哪里

<table>
  <tbody>
    {{#each rows}}
    <tr>
      {{#each cols}}
      <td><input class="cell" name="{{../row}},{{col}}" type="text" value="{{stuff ../row col}}"/></td>
      {{/each}}
    </tr>
    {{/each}}
  </tbody>
</table>

和

var iota = function (n) {return Array.apply(null, {length: n}).map(Number.call, Number); }

Template.page.rows = function () {
  return iota(Session.get('numrows')).map( function (x) {return {row: x};} );
};

Template.page.cols = function () {
  return iota(Session.get('numcols')).map( function (x) {return {col: x};} );
};

Template.page.stuff = function (i, j) {
  return Session.get('data')[i][j];
};

这似乎有效，但我觉得我滥用了这些工具。有人可以给我一些指导吗？

Answer 1

我做了一些类似的(类似于移动设备 meteor 中的电子表格)

关于使用 Session 的用途存在一些争论，因为我记得 Meteor 中的代码:在这种情况下使用 Session 会由于从/到 JSON 的转换而产生开销

我推荐:

通过使用 Deps 创建一个用于处理两个暗淡数组的对象，使数组具有反应性(具有用于添加/删除行/列、获取/设置单元格的接口(interface))文件:http://docs.meteor.com/#deps_dependency - 如果适合项目，您也可以使用集合。

我在使用当前模板系统时遇到的一个问题是，您必须将内容拆分到子模板中。您的代码所做的是在 react 数据失效时进行完整的重新渲染 - 如果一个单元格更改了整个事物的重新渲染。尝试将其拆分为:

{{each row}}
  {{>viewRow}}
{{/each}}

<template name="viewRow">
  <tr>
  {{each cell}}
    {{>viewCell}}
  {{/each}}
  </tr>
</template>

...

我在 Meteor 中为调试模板制作了一个片段:https://gist.github.com/raix/5598923这将总结模板渲染并提供一些统计数据，它帮助 med 以仅重新渲染更改的数据的方式构建我的模板。

有一天我可能会将电子表格包装在一起，