Meteor Blaze 在表格中显示对象的动态值

Question

我是 Meteor 的新手，我正在尝试在表格中显示对象的一些结果，值和行会根据结果发生变化，格式如下：

obj={10: [“1”, “3”, “0”, “0”]
11: [“1”, “7”, “0”, “0”]
12: [“1”, “12”, “0”, “0”]}

所以数据是动态的，但不是集合，数组的每个元素都是表格的一个单元格，从上面的例子中我需要一个 3 行 5 列的表格

从我目前阅读的内容来看，我的目标是：

aslagle:反应式表

它也可以用于普通数组，因为它是写的。对于我想在表格中显示的内容，这是正确的路径还是太复杂，有什么建议吗？

Answer 1

您可以使用 ReactiveVar 或 ReatciveDict 以反应方式显示数据。首先，您需要使其可迭代。最好是在 Template.onCreated 函数中执行此操作。假设您的模板名称为“myTable”：

Template.myTable.onCreated(function onMyTableCreated() {
  const instance = this
  instance.state = new ReactiveDict()
  instance.state.set('entries', [])

  instance.autorun(() => {
    const obj = // ... however you get your object
    const entries = Object.keys(obj).mapkey => ({
      key:key,
      value: obj[key]
    }))
    instance.state.set('entries', entries)
  })
})

现在您可以定义一个帮助程序，以正确的格式将已处理的条目返回到您的模板：

Template.myTable.helpers({
  entries() {
    return Template.instance().state.get('entries')
  }
})

现在您可以轻松地迭代您的条目及其值：

<template name="myTable">
  <table>
  <thead>
    <tr>
    {{#each entries}}
      <th>{{this.key}}</th>
    {{/each}}
    </tr>
  </thead>
  <tbody>
  {{#each entries}}
    <tr>
      <!-- this.value is the array, such as [“1”, “3”, “0”, “0”] -->
      {{#each this.value}}
      <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
  </tbody>
  </table>
</template>

要从这里带走的东西：

• 对象需要重组为可迭代结构
• 应该在 onCreated - 自动运行（仅在数据更改时重新运行）中进行重构，而不是在帮助程序中（在一个渲染周期中可以多次运行）中进行重构。
• 实现自己的表有助于学习 Blaze 的基础知识
• 使用包处理复杂的任意数据（注意学习曲线）