javascript - meteor :输入一些输入值后重新计算辅助值

Question

我的模板如下所示:

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

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

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

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

因此我需要一个 helper :

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