我正在使用mizzao:user-status
包来制作在线用户列表。
请注意,下面的代码是coffeescript,它一直运行良好,特别是因为我坚持使用Blaze而不是React(我没有找到在coffeescript中使用JSX的方法)。
除了切线之外,我特别对users.helpers
中的client.coffee
产生了问题。 debugger
只被调用一次,当我检查那里的users_data
变量时,它显示一个空数组。很明显,至少有一部分是反应性的,因为当我继续经过断点并再次检查users_data
的值时,它是非空的。但users
助手的返回值似乎没有变化。该功能不会重新运行。
TL;博士
如何在users
更改时重新运行users_data
辅助方法
# ------------------
# server.coffee
# ------------------
Meteor.publish 'user_status', ->
Meteor.users.find(
{ "status.online": true },
fields: {}
)
# ------------------
# client.coffee
# ------------------
Meteor.subscribe 'online_users'
users = Template.users
users.helpers
users: ->
window.users_cursor = Meteor.users.find
"status.online": true
window.users_data = users_cursor.collection._docs._map
debugger
window.final = Object.keys(users_data).map (_id) =>
user = users_data[_id]
{
_id,
name: user.profile.name
}
final
以及Blaze模板的相关部分:
<body>
<h1>Welcome to Meteor!</h1>
{{> loginButtons }}
{{> users}}
</body>
<template name="users">
{{#each users}}
<li>{{_id}}</li>
{{/each}}
</template>
答案 0 :(得分:0)
值得庆幸的是,它不是Meteor本身的错误,也无法纠正。
这一切都是不必要的:
users: ->
window.users_cursor = Meteor.users.find
"status.online": true
window.users_data = users_cursor.collection._docs._map
debugger
window.final = Object.keys(users_data).map (_id) =>
user = users_data[_id]
{
_id,
name: user.profile.name
}
final
相反,这就足够了:
users: ->
Meteor.users.find({})
Meteor.users.find
结果不是数组而且没有响应[0]
样式索引,这就是为什么我没有想到它适合作为返回值的原因帮助者。但它确实响应forEach
。这就是为什么它适用于模板的以下重构:
<template name="users">
{{#each user in users}}
<li>{{user._id}</li>
{{/each}}
</template>
剩下的一个问题是Meteor.users.find("status.online": true)
仍然不起作用,它必须是find({})
。我会就此工作并可能发布一个有关它的问题。
答案 1 :(得分:0)
除了maxple的答案之外,您还可以在HTML代码中执行此操作:
<div class="row no-padding" style="height: 65%;" *ngFor="let data of ResourceData;let i = index">
<ng-container *ngIf=" i % 2 == 0">
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceData[i].name}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceData[i+1].name}}</span></div>
</div>
</ng-container>
</div>