Блог

У Meteor есть функция создания шаблонов в реальном времени, где при изменении данных он может автоматически обновлять HTML-код на странице. Как я могу использовать эту функцию только на стороне клиента? Используя псевдокод, простейшим примером могут быть часы. Фактически я хочу сделать что-то вроде этого

 <template name="clock">
  <div>{{time}}</div>
</template>
  

Тогда полностью на стороне клиента я фактически хочу иметь возможность делать что-то вроде этого

 function publishTheTime() {
   var timeStr = (new Date()).toString();
   Meteor.somePublishFunction({time: timeStr});
}
setTimeout(publishTheTime, 5000);
  

И попросите meteor обновить время в html.

Как только я получу эту работу, я хотел бы сделать еще один шаг вперед. Представьте, что у меня есть часы по городам. Вы можете думать об этом как о базе данных, Cities где _id для каждого из них указано название города, а единственным другим полем является его time . Опять же, на 100% на стороне клиента, я хотел бы иметь возможность показывать обновленное время в реальном времени для N стран. Что-то вроде

 <template name="cities">
  <div class="cities">
    {{#each cities}}
      {{> city}}
    {{/each}}
  </div>
</template>

<template name="city">
  <div class="city">
    <div>name: {{_id}}</div>
    <div>time: {{time}}</div>
  </div>
</template>
  

Могу ли я сделать это на 100% на клиенте? Нет необходимости в полной базе данных, и на сервере ничего не должно быть, но мне все еще нужно иметь возможность выбирать города, как в

 Cities.find({_id: {$in: ["Vancover", "New York City", "London"]}})
  

и все подобные вещи.

То, что вы ищете, называется неуправляемой локальной коллекцией. Это коллекция, которую вы определяете на клиенте, которая не синхронизирована с сервером, но в остальном сохраняет те же свойства, что и обычная коллекция. Для получения более подробной информации внимательно ознакомьтесь с разделом коллекций документации.

Вы можете сделать что-то вроде этого:

 Cities = new Meteor.Collection(null);
Cities.insert({_id: 'Seattle', time: new Date});
console.log(Cities.findOne());