Question

我的模板如下所示：

<input type="text" name="inputValue" id="inputVal">

{{#each group}}
    <section>
        <h2>{{title}}</h2>
        {{#each element}}
            <p>{{description}} {{numberValue}} {{unit}}</p>
        {{/each}}
    </section>
{{/each}}

到目前为止，这是有效的。但是现在我想通过将inputfield的值与numberValue（group.element.numberValue）相乘来进行一些计算，并在模板中将其与{{calculatedValue}}一起使用：

<p>{{description}} {{calculatedValue}} {{unit}}</p>

因此我需要帮手：

Template.usedTemplate.helpers({
    'calculatedValue': function() {
        return document.getElementById("#inputVal").value * this.numberValue;
    }
});

我希望这是创建帮助程序的正确编码，因为值在每个循环中使用。

但我的问题是，用户在加载网站后输入inputValue。那么我需要做什么，在用户在输入字段中输入一些值后重新计算行？

（如果在开头会有一种输出信息文本会很好，因为默认情况下没有给出值。输入一些值后，结果会显示出来。）

Answer 1

我认为你可以简单地使用Session或ReactiveVar来解决你的问题

Session.setDefault("input-value", "")

Template.usedTemplate.events({
  'keypress #inputVal': function (event) {
    Session.set("input-value", Template.instance().$("#inputVal").val());
  }
});

Template.usedTemplate.helpers({
  'calculatedValue': function() {
    return Session.get("input-value") * this.numberValue;
  }
});

或使用ReactiveVar

Template.usedTemplate.onCreated(function(){
  this.inputValue = new ReactiveVar("")
})

Template.usedTemplate.events({
  'keypress #inputVal': function (event) {
    Template.instance().set(Template.instance().$("#inputVal").val());
  }
});

Template.usedTemplate.helpers({
  'calculatedValue': function() {
    return Template.instance().get() * this.numberValue;
  }
});

我建议使用ReactiveVar，因为Session是全局val。

在使用之前，您应该将ReactiveVar添加到您的应用中。

meteor add reactive-var

Answer 2

我还没有测试过这段代码，但试试这个：

var userInput = new Tracker.Dependency;

Template.usedTemplate.events({
  'keypress #inputVal': function (event) {
    userInput.changed();
  }
});

Template.usedTemplate.helpers({
  'calculatedValue': function() {
    userInput.depend();
    return Template.instance().$("#inputVal").val() * this.numberValue;
  }
});

附注：document.getElementById()已经预计会将ID作为参数，因此您不需要#前缀。

通常，calculatedValue帮助程序不会自动更新，因为它不包含任何被动方法调用，例如someCollection.find()或Session.get('xyz')。但是使用Tracker.Dependency，你可以做任何反应。

meteor：键入一些输入值后重新计算辅助值

2 个答案: