如何在 Meteor 的排行榜示例中更新按钮的文本？答案

【问题标题】：How Do I Update A Button's Text in Meteor's Leaderboard Example?如何在 Meteor 的排行榜示例中更新按钮的文本？
【发布时间】：2014-06-11 21:25:43
【问题描述】：

我对 Meteor 完全陌生，我正在做 leaderboard example。我的代码有点问题。

我试图添加一个切换按钮来切换排序。切换一切正常，但按钮的文本没有更新。

我的 javascript 代码：

if (Meteor.isClient) {
    Meteor.startup(function () {
        Session.set("sortMethod", "score");
    });

    ...

    Template.leaderboard.players = function () {
        if (Session.equals("sortMethod", "name"))
            return Players.find({}, {sort: {name: 1}});
        else if(Session.equals("sortMethod", "score"))
            return Players.find({}, {sort: {score: 1}});
    };

    ...

    Template.leaderboard.sortMethod = function () {
        return Session.get("sortMethod");
    }

    ...

    Template.leaderboard.events({
    'click input.sortToggle': function () {
      Session.equals("sortMethod", "name") ? Session.set("sortMethod", "score") : Session.set("sortMethod", "name");
    }
  });
}

我的车把模板：

<template name="leaderboard">
  <!-- this is where it goes wrong, the button text doesn't update at {{sortMethod}} -->
  <input type="button" class="sortToggle" value="sort by {{sortMethod}}">
  <!--  -->
  <div class="leaderboard">
    {{#each players}}
      {{> player}}
    {{/each}}
  </div>

  {{#if selected_name}}
  <div class="details">
    <div class="name">{{selected_name}}</div>
    <input type="button" class="inc" value="Give some points" />
  </div>
  {{else}}
  <div class="none">Click a player to select</div>
  {{/if}}
</template>

注意：我删除了一些不相关的代码。

【问题讨论】：

标签： javascript meteor spacebars

【解决方案1】：

如果你改用按钮，它会起作用：

<button class="sortToggle">sort by {{sortMethod}}</button>

随着事件的相应变化：

'click .sortToggle': function () { ...

更改输入的值在过去被报告为an issue，但已关闭。也许它需要重新打开。

【讨论】：

【解决方案2】：

我不确定这是错误还是功能。我认为问题源于尝试更新具有焦点的输入元素。所以解决方法是在事件处理程序的末尾模糊（）元素。像这样：

'click input.sortToggle': function ( event ) {
    Session.equals("sortMethod", "name") 
      ? Session.set("sortMethod", "score") 
      : Session.set("sortMethod", "name");
    $( event.currentTarget ).blur();
}

【讨论】：

您的解决方案有效，其他帖子确认它可能是一个错误。