Question

我正在构建一个聊天应用程序和我的新聊天＃34;页面我有一个联系人列表，您可以通过点击它们逐个选择（我在其上应用CSS选择的类并将用户ID推送到名为＆＃39; newChatters＆＃39;。

的数组中。

我想让这个数组可用于帮助器方法，这样我就可以显示一个名单的反应列表，以及已添加到聊天中的所有用户。

我想在以下位置显示反应列表的模板：

<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（）来完成这项工作？我是否甚至需要它，因为我认为辅助方法无论如何都会自动更新失效？

Answer 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();
  },
});

Answer 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');
  }
});

Answer 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});
  }
});

助手：

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

Answer 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();
      }
 });

Answer 5

适用于在2015年以上寻找解决方法的人（自2014年起发布）。

我正在实施帖子向导id1 id2 id3 H1 4 3 0 H2 1 0 0 H3 2 0 2 H4 3 1 0，我需要根据路由参数自动更新数据：

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>

希望它仍能帮到某人。

在Meteor中制作模板助手

5 个答案:

更改路线