meteor - 如何为模板项提供客户端 bool 标志？

Question

我正在研究 Meteor 的 Todos 示例来了解它的工作原理，并且我正在尝试向 Todo 项目添加描述，当您单击它时，该描述会出现在标题下方。 “当你点击它时”部分是我遇到的麻烦。我试图弄清楚如何向每个待办事项客户端添加 bool “查看”变量，而不需要服务器端的任何反射(reflect)。显然，当 1 个用户正在查看某个项目时，并非每个用户都希望查看该项目。我通过添加一个仅客户端集合来实现基本实现，该集合只是正在查看的 Todo id 列表，然后使用此代码作为模板来了解某个想法是否正在被查看:

Template.todo_item.viewing = function () {
    return Viewing_Todos.find({title: this.title}).count() > 0;
};

但这并不是一个真正理想的解决方案。正如我所说，我希望每个待办事项上都有一个客户端 bool 变量来说明它是否正在被查看。

我尝试将其更改为:

Template.todo_item.viewing = false;

然后我的点击事件是:

'click .todo-description': function(event) {
   event.target.viewing = !event.target.viewing;
}

我在控制台日志输出中添加了“event.target.viewing”是什么，它似乎正在正确更新，但 Handlebars 不再动态更新 DOM 以反射(reflect)该项目处于“查看”状态。

Handlebars HTML 是:

      {{#if viewing}}<br/>
      <div class="todo-description">
          {{text}}
      </div>
      {{/if}}

我想我可能必须在助手中执行此操作，所以我尝试了以下操作:

Template.todo_item.helpers({
    viewing: false;
});

但这似乎根本不起作用。

感谢您的帮助!总的来说，我对 Web 开发还很陌生，但到目前为止我很喜欢 Meteor。

Answer 1

为此完全不需要单独的客户端数据库。一般来说，如果你想控制 UI 状态，“查看”就是一个完美的例子，你可以设置 Meteor Session多变的。代码可能如下所示:

// Click event
'click .todo-description': function (event, templ) {
    Session.set('viewing-todo', templ._id); // We're now viewing todo with id=_id
}

// Are they viewing a todo?
if (Session.get('viewing-todo')) // ...

// Or perhaps they're viewing "foobla" todo?
if (Session.equals('viewing-todo', 'fooblaId')) // ...

但是，如果您想为每个待办事项都有一个单独的“查看”标志(他们是否能够一次查看多个项目？)，您可以尝试附加 data-* attribute到每个待办事项元素。使用 jQuery data method 可以很简单地做到这一点。您的代码可能如下所示:

// Click event
'click .todo-description': function (event, templ) {
    $(event.target).data('viewing', true);
}

// Are they viewing a todo?
if ($('#todoElement').data('viewing')) //...