Создание хелпера шаблона в Метеор

Я создаю приложение чата, и на моей странице "Новые чаты" у меня есть список контактов, которые вы можете выбрать один за другим, нажав на них (на которых я применяю выбранный класс CSS и нажимаю идентификатор пользователя в массив, называемый "newChatters".

Я хочу сделать этот массив доступным для вспомогательного метода, чтобы я мог отображать реактивный список имен со всеми пользователями, которые были добавлены в чат.

Шаблон, который я хочу отобразить в списке:

<template name="newChatDetails">
  <div class="contactHeader">
    <h2 class="newChatHeader">{{newChatters}}</h2>
  </div>
</template>

Событие click contactItem запускается при каждом контакте:

Template.contactsLayout.events({
 'click #contactItem': function (e) {
   e.preventDefault();
   $(e.target).toggleClass('selected');
   newChatters.push(this.username);
...

Массив newChatters обновляется правильно, поэтому до этого момента все работает нормально. Теперь мне нужно обновить {{newChatters}}. Вот что я пробовал, но это не так и не работает:

Template.newChatDetails.helpers({
  newChatters: function() {
    return newChatters;
  }
});

Как и где использовать Deps.autorun(), чтобы сделать это? Нужна ли мне это, так как я думал, что вспомогательные методы автоматически обновляются по недействительности?

Ответы

Ответ 1

1) Определите Tracker.Dependency в том же месте, где вы определяете свой объект:

var newChatters = [];
var newChattersDep = new Tracker.Dependency();

2) Используйте depend() перед чтением с объекта:

Template.newChatDetails.newChatters = function() {
  newChattersDep.depend();
  return newChatters;
};

3) Используйте changed() после того, как вы напишете:

Template.contactsLayout.events({
  'click #contactItem': function(e, t) {
    ...
    newChatters.push(...);
    newChattersDep.changed();
  },
});

Ответ 2

Для этого вы должны использовать объект Session.

Template.contactsLayout.events({
 'click #contactItem': function (e) {
   //...
   newChatters.push(this.username);
   Session.set('newChatters', newChatters);
 }
});

а затем

Template.newChatDetails.helpers({
  newChatters: function() {
    return Session.get('newChatters');
  }
});

Ответ 3

Вы можете использовать локальный Meteor.Collection курсор в качестве реактивного источника данных:

var NewChatters = new Meteor.Collection("null");

Шаблон:

<template name="newChatDetails">
  <ul>
    {{#each newChatters}}
      <li>{{username}}</li>
    {{/each}}
  </ul>
</template>

Событие:

Template.contactsLayout.events({
  'click #contactItem': function (e) {
    NewChatters.insert({username: this.username});
  }
});

Helper:

Template.newChatDetails.helpers({
  newChatters: function() { return NewChatters.find(); }
});

Ответ 4

Чтобы сопоставить поведение Session без загрязнения Session, используйте ReactiveVar:

 Template.contactsLayout.created = function() {
      this.data.newChatters = new ReactiveVar([]);
 }

 Template.contactsLayout.events({
      'click #contactItem': function (event, template) {
            ...
            template.data.newChatters.set(
                template.data.newChatters.get().push(this.username)
            );
           ...

Затем во внутреннем шаблоне используйте исходный реактивный источник данных:

 Template.newChatDetails.helpers({
      newChatters: function() {
           return Template.parentData(1).newChatters.get();
      }
 });

Ответ 5

для людей, которые ищут обходной путь для этого в 2015 году + (начиная с 2014 года).

Я реализую мастер сообщений pw_module, где мне нужно оперативно обновлять данные в зависимости от параметров маршрута:

Router.route('/new-post/:pw_module', function(){
    var pwModule = this.params.pw_module;
    this.render('post_new', {
        data: function(){
            switch (true) {
                case (pwModule == 'basic-info'):
                    return {
                        title: 'Basic info'
                    };
                    break;
                case (pwModule == 'itinerary'):
                    return {
                        title: 'Itinerary'
                    };
                    break;
                default:
            }
        }
    });
}, {
    name: 'post.new'
});

Позже в шаблоне просто выполните:

<h1>{{title}}</h1>

Изменение маршрутов

Навигация, который обновляет URL-адрес, выглядит следующим образом:

<nav>
    <a href="{{pathFor route='post.new' pw_module='basic-info'}}">Basic info</a>
    <a href="{{pathFor route='post.new' pw_module='itinerary'}}">Itinerary</a>
</nav>

Надеюсь, что это все еще помогает кому-то.