Question

我正在使用MeteorJS开发餐厅管理系统。我在这里尝试完成的是当我输入一些数字＆＃34; Quantity＆＃34;它将自身与价格相乘，价格为＆＃34; Price＆＃34;列，然后在＆＃34; Total＆＃34;中显示文本框内的总销售额。柱。我知道那里有几个解决方案，但我想知道是否可以使用Meteor模板助手来完成。

Screenshot

Answer 1

是的，Meteor模板具有反应性，因此您只需要执行以下操作：

<template name="costCalcualtor">
  <input id="quantity">
  <p id="price">$10</p>
  <p>It'd be ${{totalCost}}.</p>
</template>

在你的html中，在你的JS中，只是发出一个Template.costCalcualtor事件，每当用户输入input＆＃34;数量＆＃34; id，将innerHTML解析为整数，将其乘以价格（通过解析＆＃34; price＆＃34; id），p的{{1}}的innerHTML获得的另一个整数，然后Session.set('price',finalValue 1}}作为totalCost辅助函数，返回基于Template.costCalcualtor的新值。

更新

不要在keyup事件中返回变量，最后应使用Session.get("price")，而Session.set("total", price*quantity);行并没有真正做任何事情。< / p>
然后您需要在模板中使用var total = parseInt($('total').val(price * quantity));。并定义一个助手来检索会话变量的值＆＃34;总计＆＃34;：{{totalCost}}。

以下是演示我的意思的演练：

在您的Session.get("total")文件中：

.js

在if (Meteor.isClient) { // counter starts at 0 Session.setDefault('counter', 0); Template.salesAdd.helpers({ total: function(){ return Session.get("total") } }); Template.salesAdd.events({ 'keyup #meow': function() { var quantity = parseInt($('#meow').val()); console.log(quantity); Session.set("total", quantity); } }) }文件中：

.html

运行它＆amp;在<head> <title>meow</title> </head> <body> <h1>Welcome to Meteor!</h1> {{> salesAdd}} </body> <template name="salesAdd"> <input id="meow"> <p> What you've typed: {{total}}</p> </template>输入时查看号码更改。

Meteor是一款非常强大的工具，由优秀的人员开发，它的优点在于它易于学习并且具有良好的文档，因此我建议你go through the basic docs，如果可能，{ {3}}

将2个输入值相乘并使用Meteor模板助手在输入文本框上显示

1 个答案: