Question

考虑这个假设的例子。 HTML：

{{#each items}}
    {{>item}}
{{/each}}
Price = {{itemTotals.totalPrice}}
Qty = {{itemTotals.totalQty}}

JS：

Template.cart.items = function () {
    var items = Items.find();
    var cartTotals = [];
    items.forEach(function(item){
        ..somecode...
        cartTotals.price += item.price;
        cartTotals.qty += 1;
    });
    return items;
}

当然，我们想要一个函数“itemTotals”。如果我们做price = {{items.itemTotals.totalPrice}}，并且qty相同，我们必须遍历项目3次。我试图将总数存储为反应变量，如下所示，但无法使其工作：

Template.cart.rendered = function () {
    this.totals = new ReactiveVar([]);
}
Template.cart.items = function () {
    var items = Items.find();
    var cartTotals = [];
    items.forEach(function(item){
        ...
    });
    this.totals.set(cartTotals);
    return items;
}

Template.cart.totals = function () {
    return this.totals.get();
}

我想1）理解为什么没有发生反应2）找出是否有办法让模板函数等待另一个 - 这比从反应变量加载和重载值更有效

Answer 1

你可以尝试这样的事情

你的.html

<template name="itemsList">
 {{#each items}}
    {{>item}}
 {{/each}}
 Price = {{totalPrice}}
 Qty = {{totalQty}}
</template>

你的.js

Template.itemsList.helpers({
    totalPrice: function(){
       var price= 0;
       var items= Items.find({});
       items.forEach(function(item){
           price+=item.price;
       });
       return price;
    },
    totalQty: function(){
       return Items.find({}).count();
    },
    items:function(){
      return Items.find({});
    }
})

干得好！

其他选择......

Tracker.autorun(function () {
  Session.set("totalPrice");
  Session.set("totalQty");
})

Template.itemsList.helpers({
    totalPrice: function(){
      return Session.get("totalPrice");
    },
    totalQty: function(){
       return Session.get("totalQty");
    },
    items:function(){
      var price= 0;
      var items= Items.find({});
      var count= items.count();
      items.forEach(function(item){
           price+= Number(item.price);
      });
      Session.set("totalPrice",price);
      Session.set("totalQty",count);
      return items; 
    }
});

Answer 2

Walter Zalazar建议的另一个选项可行，但是，由于Session的限制，使用Session强制我们将每个值（价格，数量等）存储为单独的变量。经过一些反复试验，我发现以下方法将整个数组存储为一个反应变量：

totals = new ReactiveVar([]);

Template.cart.items = function () {
  //foreach loop as before, calculate cartTotals, etc
  totals.set(cartTotals);
  return items;
}

Template.cart.totals = function () {
  return totals.get();
}

并在html中：

{{totals.totalPrice}}
{{totals.qty}}

如何存储在模板助手函数中计算的值并在另一个模板函数中使用它们？

2 个答案: