Meteor.js 排行榜示例，如何响应式更改按钮值？

Question

我尝试通过添加一个按钮来切换按名称/分数排序的排行榜示例。

我成功添加了事件，但我也想更改按钮上的文本值。

我希望添加的按钮文本值（按 name/score 排序）得到响应式更新（每次单击按钮时），但是它没有这样做，只有在手动单击时才会更新播放器项目。

添加代码：

leaderboard.html（排行榜模板）：

    <template name="leaderboard">
    <div class="leaderboard">
    <input type="button" name="sort" value="Sort by {{sort_type}}" class='sort'/>

     {{#each players}}
      {{> player}}
     {{/each}}
    </div>

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

leaderboard.js（客户端部分）：

    if (Meteor.isClient) {

    Meteor.startup(function(){
        Session.setDefault('sort_order', {score: -1, name: 1});
    Session.setDefault('sort', 'name');
    }); 

    Template.leaderboard.players = function () {
      return Players.find({}, {sort: Session.get('sort_order')});
    };

    Template.leaderboard.selected_name = function () {
      var player = Players.findOne(Session.get("selected_player"));
      return player && player.name;
    };

    Template.leaderboard.sort_type = function() {
  return Session.get('sort');
    };

    Template.player.selected = function () {
      return Session.equals("selected_player", this._id) ? "selected" : '';
    };

    Template.leaderboard.events({
      'click input.inc': function () {
        Players.update(Session.get("selected_player"), {$inc: {score: 5}});
      },

      'click input.sort': function(){
        var sort_order = Session.get('sort_order');
    if (_.isEqual(sort_order, {score: -1, name: 1}) || _.isEqual(sort_order, {score: 1})) {
        Session.set('sort_order', {name: 1});
            Session.set('sort', 'score');
    } else if (_.isEqual(sort_order, {name: 1})){
        Session.set('sort_order', {score: 1});
        Session.set('sort', 'name');
    }  

  }
    });
      Template.player.events({
        'click': function () {
           Session.set("selected_player", this._id);
        } 
    });
   }

谢谢！

B.R.

伊恩

Answer 1

这与preserve-inputs 包有关。来自 Meteor Docs：

默认情况下，新的 Meteor 应用会自动包含 preserve-inputs 包。这将保留所有类型为 input、textarea、button、select 和 option 的元素，它们具有唯一的 id 属性或具有在具有 id 属性的封闭元素中唯一的名称属性。要关闭此默认行为，只需删除 preserve-inputs 包。

所以基本上因为你的按钮有一个name 属性，Meteor 阻止它在重新渲染模板时发生变化。您可以通过三种方式解决此问题：

1. 只需从input.sort 属性中删除name 属性即可。

2. 删除preserve-inputs 包（如果您使用的是当前模板引擎，则不推荐）。

3. 您可以使用新 Meteor 模板引擎的预览版，它不再需要 preserve-inputs 包，因为它会自动执行更细粒度的 DOM 更新。您可以使用预览版运行该应用一次：

   meteor --release shark-1-29-2014-e
   

   或者你可以告诉 Meteor 通过运行将你的应用更新到这个版本：

   meteor update --release shark-1-29-2014-e
   

   请注意，这个新的模板引擎将包含在 1.0 的 Meteor 核心版本中。