流星助手没有被动地运行

时间:2017-05-02 02:04:17

标签: javascript meteor coffeescript meteor-blaze

我正在使用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>

2 个答案:

答案 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>