Javascript 流星阵列项目类增加,但如何?

Javascript 流星阵列项目类增加,但如何?,javascript,arrays,meteor,Javascript,Arrays,Meteor,我正试图学习Meteor js并通过一个教程进行学习,但无法理解一行是如何通过以下方式突出显示的: 首先,通过以下方式返回数组: {{# each player}} <li class="player {{selectedClass}}">{{name}} => {{score}}</li> {{/each}} 因此我得到了,作为click事件的结果,selectedPlayer变量引用了被单击行的id。但是我们如何遍历数组,将选中的添加为正确行的l

我正试图学习Meteor js并通过一个教程进行学习,但无法理解一行是如何通过以下方式突出显示的:

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

      {{# each player}}
      <li class="player {{selectedClass}}">{{name}} => {{score}}</li>
      {{/each}}
    
    因此我得到了,作为
    click事件的结果,selectedPlayer变量引用了被单击行的id。但是我们如何遍历数组,将
    选中的
    添加为正确行的
    li
    元素的一个类呢

    i、 e。 当用户选择一行时,它会突出显示通过使用helper函数和css类选择的行。
    。selected

    selectedClass: function(){
        var playerId = this._id;
        var selectedPlayer = Session.get('selectedPlayer');
        if(playerId == selectedPlayer){
        return "selected"; 
    
    我的问题是:当用户选择一行时,我们在何处迭代数组以将
    selected
    添加到所选行,从而允许它高亮显示


    我为复杂的解释道歉。它快把我逼疯了

    假设
    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>
    
    为了更简洁,我使用了三元运算符,请注意,目前无法编写此类空格键标记

    您需要了解的是,
    selectedClass
    不是一个在数组上迭代以在所选行上添加适当类的函数,它是一个模板帮助程序,用于执行
    {{each}}
    块迭代的每个播放器文档

    selectedClass
    正在将当前数据上下文id(使用
    this.\u id
    语法,因为在模板助手中,
    this
    关键字绑定到当前数据上下文)与包含所选播放器的
    \id
    的全局
    会话
    变量进行比较

    如果两个值匹配,则返回
    “selected”
    字符串,如果不匹配,则返回空字符串

    列表项类正在分配给
    “player{{{selectedClass}}”
    ,因此当前选定的项将具有具有具有以下值的class属性:
    “player selected”

    <li class="player {{selectedClass}}">Alice => 15</li>
    <li class="player {{selectedClass}}">Bob => 10</li>
    <li class="player {{selectedClass}}">Claire => 5</li>
    
    <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>