如何在Meteor.js中跟踪焦点变化

时间:2015-04-19 20:32:38

标签: meteor hook

我的应用程序中有一个页面,它是一种协作工作区。在此页面上,我想显示已登录用户的列表,以及他们当前是否关注此协作工作区。

简而言之:我想跟踪某个页面上的焦点。

之前有人这样做过吗?或者周围有包裹吗?我找到了BenjaminRH/meteor-event-hooks,但这似乎停止了2年的支持。我已经尝试过并遇到了很多问题。

2 个答案:

答案 0 :(得分:1)

您可以使用dpid:user-presence执行此操作。添加您的应用程序应该添加一个名为UserPresences的集合,其中包含有关您网站当前打开的每个浏览器窗口的信息。

答案 1 :(得分:0)

这是一个完整的解决方案

我添加了包,并在客户端

上设置了一个额外的字段
UserPresence.data = function() {
    return {
         focus: Iron.Location.get().path
    };
 }

我从Meteor.users中读取相关的用户并将其传递给视图

Template.userstatus.helpers({
    'users':function(){
        var project    = Projects.findOne({_id:Session.get('active_project')});
        var userList   = Meteor.users.find( { $or: [ {_id:{$in:project.invited}},
        {_id:project.userId} ] } );
        return userList;
    }
});

<template name="userstatus">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Teilnehmer Status</h3>
    </div>
    <div class="panel-body">
          {{#each users}}
              {{ >useronline }}
          {{/each}}
    </div>
  </div>
</template>


<template name="useronline">
        <span style="margin-right: 2px;" class="label {{labelClass}}">{{profile.name }} </span>
 </template>

需要第二个模板,因为我需要&#34;这个&#34;帮助器中的上下文到&#34;隐式连接&#34;数据。

在线/离线/空闲/聚焦状态下的用户的实际显示是在useronline助手中完成的(这些类是普通的bootstrap):

Template.useronline.helpers({
     labelClass: function() {
        var UP = UserPresences.findOne( {userId:this._id});

        if (UP === undefined)
            return "label-default";

        if (UP.data.focus === Iron.Location.get().path)
             return "label-warning";

        if (UP.state === 'idle')
            return "label-primary";
        else if (UP.state === 'online')
            return "label-success";
        else
            return "label-default";
    }
});