Question

我目前正在建立一个漂亮的小人才点经销商＆＃39;视图，类似于流行的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);
})

您可以根据需要使用模板中的一些initialValue

请参阅我为您创建的MeteorPad的完整示例。

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

这应该可以解决你的问题

干杯汤姆

Answer 2

您是否了解meteor中的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（）{...} 方法。

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

2 个答案: