如何根据Meteor集合中的每个项目更新一个字段的值？ （客户端，没有持久性）

Question

使用Meteor JS，我想在表格中显示商品，价格和数量列表。数据库只包含名称和价格（每个项目）。当用户更改数量字段时，我希望更新价格。但是，我不需要将数量存储在服务器上。

HTML：

<template name="list">
  <tbody>
    {{#each items}}
      {{> item}}
    {{/each}}
  </tbody>
</template>

<template name="item">
  <tr class="item {{selected}}">
    <td class="name">{{name}}</td>
    <td class="qty">
      <input class="qty" name="qty" id="qty" type="text" value="1" />
    </td>
    <td class="macro">{{calc price}}g</td>
  </tr>    
</template>

JS：

Template.list.items = function () {
  return Items.find({});
};

Template.item.calc = function(price){
  var price = Number(num);
  var qty = 1;//This is where we need to retrieve the relevant quantity
  return price*qty;
}

我可以想到三种可能的方法。

1. 将项目存储到也包含数量的客户端集合中。向数量输入添加事件侦听器，在值更改时相应地更新集合。关注 - 当我们需要更新其他字段（即名称）并实际保留它们时会发生什么？
2. 在会话中存储itemId-quantity地图，在Template.list.items或Template.item.calc中计算价格
3. 使用itemId和quantity存储本地客户端集合，计算与＃2
相同的价格

我想知道在效率方面最好的方法是什么

Answer 1

除了不使用Session之外，还有另一种类似于＃2的方法。如您所述存储itemId-quantity映射，但是为每个项目附加一个反应依赖项。这样，当一个数量发生变化时，只有受影响的项目会更新。

var qtys = {};

Template.item.created = function () {
  qtys[this.data._id] = {
    value: 1,
    dep: new Deps.Dependency
  };
};

Template.item.destroyed = function () {
  qtys[this.data._id] = null;
}

Template.item.calc = function (price){
  var price = Number(num);
  var qty = qtys[this._id];
  qty.dep.depend();
  return price*qty.value;
}

Template.item.events({
  'change input.qty': function (ev) {
    var qty = qtys[this._id];
    qty.value = $(ev.target).val();
    qty.dep.changed();
  }
});

将来，当帮助者可以访问模板实例时，这将变得更加容易。然后，您可以将值和依赖项存储在模板实例中，并且不需要qtys。

来自Meteor docs：

  

在以后的版本中，模板实例对象（或类似的东西）将从辅助函数中可见，并且创建将是设置从帮助程序读取的值的有用方法。