Meteor Blaze отображает динамические значения объекта в таблице - PullRequest
Новая
       25

Meteor Blaze отображает динамические значения объекта в таблице

0 голосов
/ 06 ноября 2018

Я новичок в Meteor, и я пытаюсь отобразить некоторые результаты объекта в таблице, значения и строки меняются в соответствии с результатом, который имеет следующий формат: 

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

поэтому данные являются динамическими, но не коллекцией, каждый элемент массива является ячейкой таблицы, и из приведенного выше примера мне нужна таблица с 3 строками и 5 столбцами

Из того, что я прочитал, я направлялся к:

aslagle: реактивная стол

, который можно использовать и для простого массива, как он написан. Это правильный путь или слишком сложный для того, что я хочу показать в таблице, есть какие-нибудь предложения?

1 Ответ

0 голосов
/ 06 ноября 2018

Вы можете использовать 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
  • Использование пакетов для обработки сложных произвольных данных (обратите внимание на кривую обучения)
...