javascript - Meteor - 添加了数组项目类，但是如何添加？

Question

我正在尝试学习 Meteor js 并完成教程，但无法理解以下内容如何突出显示一行:

• 首先通过以下方式返回一个数组:

    {{# each player}}
    <li class="player {{selectedClass}}">{{name}} => {{score}}</li>
    {{/each}}
  

初始化时没有选择任何内容，因此上面的selectedClass函数不会返回任何内容。

然后，当用户单击一行时，会发生一个单击事件:

'click .player': function(){
   var playerId = this._id;
   Session.set('selectedPlayer', playerId);
   var selectedPlayer = Session.get('selectedPlayer');

所以我明白了，由于 click 事件，selectedPlayer 变量引用了单击的行的 id。但是我们如何迭代数组以将 selected 添加为正确行的 li 元素的类呢？

即 当用户选择一行时，它会使用辅助函数和 css 类 .selected 突出显示所选行:

selectedClass: function(){
    var playerId = this._id;
    var selectedPlayer = Session.get('selectedPlayer');
    if(playerId == selectedPlayer){
    return "selected"; 

我的问题是:当用户选择一行时，我们在哪里迭代数组以将 selected 添加到所选行，从而使其突出显示。

对复杂的解释表示歉意。这让我抓狂。

Answer 1

假设players返回一个游标，用于迭代客户端上获取的每个文档，并且有 3 个文档具有以下值:

{_id: "ABC", name: "Alice", score: 15}
{_id: "DEF", name: "Bob", score: 10}
{_id: "GHI", name: "Claire", score: 5}

让我们重写{{#each}}循环查看 Meteor Blaze 实际渲染的内容。

<li class="player {{selectedClass}}">Alice => 15</li>
<li class="player {{selectedClass}}">Bob => 10</li>
<li class="player {{selectedClass}}">Claire => 5</li>

{{name}}和{{score}}只是被当前数据上下文中的相应值替换，因为 {{#each}} block 助手不仅迭代集合，还将内容 block 的数据上下文设置为当前迭代的项目。

selectedClass然而，它是一个“计算的”模板助手，它不仅仅返回当前数据上下文的字段，而是必须动态计算其值。

如果我们用伪代码替换助手名称，我们将得到以下内容:

<li class="player {{"ABC" == Session.get("selectedPlayer") ? "selected" : ""}}">Alice => 15</li>
<li class="player {{"DEF" == Session.get("selectedPlayer") ? "selected" : ""}}">Bob => 10</li>
<li class="player {{"GHI" == Session.get("selectedPlayer") ? "selected" : ""}}">Claire => 5</li>

我使用三元运算符是为了更简洁，请注意，您目前无法编写此类空格标记。

您需要了解的是selectedClass不是在数组上迭代以在所选行上添加适当的类的函数，它是为 {{#each}} 迭代的每个播放器文档执行的模板助手。 block 。

selectedClass正在将当前数据上下文 _id(使用 this._id 语法，因为在模板助手内部，this 关键字绑定(bind)到当前数据上下文)与全局 Session 进行比较。包含 _id 的变量所选玩家的。

如果两个值匹配，则 "selected"返回字符串，如果不是则返回空字符串。

列表项类被分配给 "player {{selectedClass}}"因此当前选定的项目将具有具有以下值的类属性:"player selected" .