Question

我对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>

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

Answer 1

如果您使用按钮，它会起作用：

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

随着事件的相应变化：

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

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

Answer 2

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

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

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

2 个答案: