Question

我正在玩meteor的Todos示例以了解它是如何工作的，并且我正在尝试在单击它时在标题下方添加对Todo项目的描述。 “当你点击它”部分是我遇到的麻烦。我试图弄清楚如何在每个Todo项目客户端添加一个布尔“查看”变量，而不反映该服务器端。显然，当1个用户正在查看项目时，并非每个用户都希望查看该项目。我得到了一个基本的实现，通过添加一个仅限客户端的集合，它只是一个正在查看的Todo ID列表，然后使用此代码来模拟是否正在查看思想：

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

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

我尝试将其更改为：

Template.todo_item.viewing = false;

然后我的点击事件是：

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

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

Handlebars HTML是：

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

我想我可能必须在帮助器中这样做，所以我尝试了以下内容：

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

但这似乎根本不起作用。

感谢您的帮助！我对Web开发很新，但到目前为止我很喜欢Meteor。

Answer 1

您应该使用如下的Session变量：

Template.todo_item.created=function(){
    Session.set(this.data._id+"-viewing",false);
};

Template.todo_item.helpers({
    viewing:function(){
        return Session.get(this._id+"-viewing");
    }
});

Template.todo_item.events({
    "click .todo-description":function(event,template){
        var viewing=Session.get("-viewing");
        Session.set(template.data._id+"-viewing",!viewing);
    }
});

此代码假定todo_item模板数据上下文是具有自己唯一_id的有效Todos文档。

我们使用此_id命名一个唯一的会话变量，该变量将被动地存储项目的当前查看状态，模板将在修改此变量时重新呈现。

请注意我们如何以不同方式访问数据上下文：

在创建/渲染/销毁的回调中，“this”绑定到模板实例，我们可以使用data属性（this.data）访问数据上下文。
在模板助手中，“this”直接绑定到数据上下文。
在事件处理程序中，模板实例可通过参数访问，因此我们可以再次使用data属性（template.data._id）。

在未来版本的Meteor中，模板将拥有自己的作用域会话变量，希望这种技术更容易实现。

Answer 2

完全不需要这个单独的客户端数据库。通常，如果要控制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')) //...

如何为Template项提供客户端布尔标志？

2 个答案: