在没有jQuery或操纵DOM的情况下将数字转换为货币

Question

据说，

  

一个好的经验法则是，如果你使用jQuery来操纵任何一个   DOM元素，你可能做错了。

和

  

需要从辅助函数访问元素表示您   试图使用程序编码风格而不是   模板驱动的风格。

我有一个简单的数字输入，我希望将其转换为更易于理解的货币，以便用户了解他在做什么。我想这样做：

<input type="number" class="raw-price">
<p>Price in USD: {{priceInUsd}}</p>

然后定义一个帮助器：

Template.myTemplate.helpers({
  priceInUsd: function() {
    var rawPrice = $('.raw-price').val()
    //perform calculation
    return calculationResult
  }
})

首先，这不起作用（我真的不知道为什么）。其次，这与我在上面发布的“规则”背道而驰。我如何假设这样做？我可能会以相同的方式使用事件监听器，但我认为这仍然是错误的方法。

Answer 1

Flash更新！

其实！这是一个更好的解决方案：reactive variables！如果您希望将rawPrice保留在此模板中，只需安装标准reactive-var包：

meteor add reactive-var

以这种方式去做：

模板：

<input type="number" class="raw-price">
<p>Price in USD: {{priceInUsd}}</p>

onCreated：

Template.myTemplate.onCreated(function() {
  this.rawPrice = new ReactiveVar;
  this.rawPrice.set(''); // not sure what you want to preset your value to
});

助手：

Template.myTemplate.helpers({
  priceInUsd: function() {
    var rawPrice = Template.instance().rawPrice.get()
    //perform calculation
    return calculationResult
  }
})

事件：

Template.myTemplate.events({
  "change .raw_price": function (evt, template) {
    template.rawPrice.set($(evt.currentTarget).val());
  }
});

上一个（已接受）答案

根据我在流星中看到的双向数据绑定的大多数例子，最好的情况可能是使用助手，事件和Session变量，就像这样。

模板：

<input type="number" class="raw-price">
<p>Price in USD: {{priceInUsd}}</p>

助手：

Template.myTemplate.helpers({
  priceInUsd: function() {
    var rawPrice = Session.get('rawPrice');
    //perform calculation
    return calculationResult
  }
})

事件：

Template.myTemplate.events({
  "change .raw_price": function (evt) {
    Session.set("rawPrice", $(evt.currentTarget).val());
  }
});

可悲的是，您正在使用会话变量，但它仍然比使用集合来处理这样的本地事物更好，就像我在其他示例中看到的那样......