流星模板未根据更改的数据更新

Question

我目前正在构建一个漂亮的小“天赋点分配器”视图，类似于流行的 RPG 游戏提供的视图。我不想要所有按钮和文本框的 HTML 代码的巨大墙，所以我创建了一个模板，我将两个参数传递给它：

• 我要更改的统计信息的名称
• stat 的初始值

模板正确呈现，我注意到当我将结果记录到控制台时，变量似乎已正确更改。但是，显示的值不会改变，会一直保持为 0。

这是模板本身：

<template name="attributeStepper">
  <div class="row" style="margin: 1em;">
    <div class="col-sm-3 col-md-2">
      <h4>{{toUpper attribute}}</h4>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default btn-value-dec">
          <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
        <button type="button" class="btn btn-default disabled">{{attributeValue}}</button>
        <button type="button" class="btn btn-default btn-value-inc">
          <span class="glyphicon glyphicon-chevron-up"></span>
        </button>
      </div>
    </div>
  </div>
</template>

这是我为模板定义的助手：

Template.attributeStepper.helpers({
  toUpper : function(str) {
    return str.substring(0, 1).toUpperCase() + str.substring(1);
  }
})

Template.attributeStepper.events({
  'click .btn-value-inc' : function(event, tmpl) {
    tmpl.data.attributeValue ++;

  },

  'click .btn-value-dec' : function(event, tmpl) {
    tmpl.data.attributeValue --;
  }
});

这就是我从实际视图中调用模板的方式：

<div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Attributes</h3>
      </div>
      {{ >attributeStepper attribute="strength" attributeValue="0"}}
      {{ >attributeStepper attribute="courage" attributeValue="0"}}
      {{ >attributeStepper attribute="intelligence" attributeValue="0"}}
      {{ >attributeStepper attribute="agility" attributeValue="0"}}
      {{ >attributeStepper attribute="dexterity" attributeValue="0"}}
      {{ >attributeStepper attribute="intuition" attributeValue="0"}}
      {{ >attributeStepper attribute="charisma" attributeValue="0"}}
    </div>

我希望你能从中理解并告诉我我做错了什么，因为我觉得我还没有正确地遵循 Meteor 背后的思维方式。

干杯！

Answer 1

您的代码没有任何问题，但也没有任何反应。对于 attributeValue，您应该使用在 onCreate 事件中创建的基于模板的 ReactiveVar

Template.attributeStepper.onCreated(function() {
  if (! _.isUndefined(this.data.startingValue))
    this.attributeValue = new ReactiveVar(Number(this.data.startingValue));
  else
    this.attributeValue = new ReactiveVar(0);
})

你可以随意使用 Template 中的一些 initialValue

在我为您创建的 MeteorPad 上查看完整示例。

http://meteorpad.com/pad/Zw7YnnW57uuGKcu3Q/MultipleTemplateUsage

这应该可以解决您的问题

干杯 汤姆

Answer 2

你知道流星中的 reactive-var (Meteor Doc) 或者你也可以使用 Session 代替 reactive-var（ReactiveVar 类似于 Session 变量）

根据您的代码查看更改。

这是模板（.html）

<template name="attributeStepper">
    <div class="row" style="margin: 1em;">
        <div class="col-sm-3 col-md-2">
           <h4>{{toUpper attribute}}</h4>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default btn-value-dec">
                     <span class="glyphicon glyphicon-chevron-down"></span>
                </button>
                <button type="button" class="btn btn-default disabled">{{getAttributeValue}}</button>
                <button type="button" class="btn btn-default btn-value-inc">
                    <span class="glyphicon glyphicon-chevron-up"></span>
                </button>
            </div>
        </div>
    </div>
</template>

这是您的模板 (.js) 的助手

Template.attributeStepper.created = function(){
    this.attributeValue = new ReactiveVar(parseInt(this.data.attributeValue));
}

Template.attributeStepper.helpers({
    toUpper : function(str) {
        return str.substring(0, 1).toUpperCase() + str.substring(1);
    },
    getAttributeValue : function(){
        return Template.instance().attributeValue.get();
    }
});

Template.attributeStepper.events({
    'click .btn-value-inc' : function(event, tmpl) {
        tmpl.attributeValue.set(tmpl.attributeValue.get()+1)
    },

    'click .btn-value-dec' : function(event, tmpl) {
        tmpl.attributeValue.set(tmpl.attributeValue.get()-1)
    }
});

Template.attributeStepper.created = function(){...} 方法在第一次评估模板逻辑之前调用。