Question

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

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

我希望添加的按钮文本值（按名称/得分排序）会被反应更新（每次我点击按钮），但是没有这样做，只有在手动点击时才会更新玩家项目。

已添加代码：

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包。这将保留输入，textarea，button，select和option类型的所有元素，这些元素具有唯一的id属性，或者具有在具有id属性的封闭元素中唯一的name属性。要关闭此默认行为，只需删除preserve-inputs包。

所以基本上因为你的按钮有一个name属性，Meteor阻止它在重新渲染模板时改变。有三种方法可以解决这个问题：

只需从name属性中删除input.sort属性。
删除preserve-inputs包（如果您使用的是当前模板引擎，则不建议这样做。）
您可以使用新的Meteor模板引擎的预览版本，它不再需要preserve-inputs包，因为它会自动执行更细粒度的DOM更新。您可以使用预览版本运行应用程序一次：
```
meteor --release shark-1-29-2014-e
```
或者您可以通过运行：
告诉Meteor将您的应用更新到此版本
```
meteor update --release shark-1-29-2014-e
```
请注意，这个新的模板引擎将包含在Meteor核心版本中1.0。

Meteor.js排行榜的例子，如何有效地改变按钮值？

1 个答案: