如何在Meteor中为带有输入单元格表的表单做响应式绑定?

How do I do reactive binding for a form with a table of input cells in Meteor?

本文关键字：表单 响应 绑定 单元格 输入 Meteor      更新时间：2023-09-26

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

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

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

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

对我来说，在其他地方执行这个转换是很容易的。

我一直在做一个玩具实现，在不增加集合和用户帐户的复杂性的情况下，把我的头脑集中在响应部分。硬编码的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];
};

这似乎是工作，但我觉得我滥用的工具。有人能在这方面给我一些指导吗?

我做了一些类似的(类似于流星的移动电子表格)

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

我建议:

通过创建一个对象来处理使用Deps的两个dim数组，使数组响应(有一个接口:添加/删除row/col，获取/set cell)Docs: http://docs.meteor.com/#deps_dependency -你也可以使用集合，如果它适合项目。

我在当前模板系统中遇到的一个问题是，你必须在子模板中拆分内容。你的代码所做的是在响应性数据失效时进行完整的渲染——如果一个单元格发生了变化，那么整个单元格都会被渲染。试着像这样拆分:

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

我编写了一个片段，用于在Meteor中调试模板:https://gist.github.com/raix/5598923这将总结模板渲染给出一些统计数据，它帮助我构建模板的方式，只有改变的数据被重新渲染。

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

相关文章：