2

我正在玩流星的 Todos 示例以了解它是如何工作的，并且我正在尝试向 Todo 项目添加一个描述，当您单击它时，它会显示在标题下方。“当你点击它”部分是我遇到的麻烦。我试图弄清楚如何向每个 Todo 项客户端添加一个布尔“查看”变量，而不需要对该服务器端进行任何反映。显然，当一个用户正在查看一个项目时，并不是每个用户都希望查看该项目。我通过添加一个仅限客户端的 Collection 来实现一个基本的实现，该 Collection 只是一个正在查看的 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 以反映该项目处于“查看”状态。

Handlebars HTML 是：

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

我想我可能不得不在助手中做，所以我尝试了以下方法：

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

但这似乎也不起作用。

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

4

2 回答 2

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 模板数据上下文是一个有效的 Todos 文档，具有自己的唯一 _id。

我们使用这个 _id 来命名一个唯一的会话变量，它将反应性地存储项目的当前查看状态，每当修改这个变量时，模板都会重新呈现。

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

  • 在 created/rendered/destroyed 回调中，“this”绑定到模板实例，我们可以使用 data 属性（this.data）访问数据上下文。

  • 在模板助手中，“this”直接绑定到数据上下文。

  • 在事件处理程序中，模板实例可通过参数访问，因此我们可以再次使用数据属性 (template.data._id)。

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

于 2013-11-03T19:55:18.183 回答
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-* 属性附加到每个待办事项元素。使用jQuery 数据方法很容易做到这一点。您的代码可能如下所示：

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

// Are they viewing a todo?
if ($('#todoElement').data('viewing')) //...
于 2013-11-03T20:17:20.130 回答