查看车把循环 MeteorJS 中的上一项答案

【问题标题】：Looking at previous item in handlebars loop MeteorJS查看车把循环 MeteorJS 中的上一项
【发布时间】：2015-04-24 04:41:21
【问题描述】：

我有一个模板，只有当当前项目与前一个项目有一些不同的字段时，我才想在其中生成一些 HTML。

{{#each item}}
  // if previous item.ar == current item.var, do X
  // else, do Y
{{/each}

如何访问上一个项目？

【问题讨论】：

我认为这与助手有关，因为您正在那里处理排序。

标签： mongodb meteor handlebars.js

【解决方案1】：

我遇到了这个问题并用一些辅助函数解决了它。这个想法是创建一些帮助器来进行数学计算和比较，然后创建一个帮助器来查找对象中的特定条目。

数学：

Handlebars.registerHelper({
    add: function () {
        'use strict';
        var total = 0;
        var i = arguments.length;
        while (i--) {
            if (typeof arguments[i] === 'number') {
                total += arguments[i];
            }
        }

        return total;
    },
    subtract: function () {
        'use strict';
        var total = 0;
        var i = arguments.length;
        while (i--) {
            if (typeof arguments[i] === 'number') {
                total -= arguments[i];
            }
        }

        return total;
    },
    multiply: function () {
        'use strict';
        var total = 0;
        var i = arguments.length;
        while (i--) {
            if (typeof arguments[i] === 'number') {
                total *= arguments[i];
            }
        }

        return total;
    },
    divide: function () {
        'use strict';
        var total = 0;
        var i = arguments.length;
        while (i--) {
            if (typeof arguments[i] === 'number') {
                total /= arguments[i];
            }
        }

        return total;
    },
    modulus: function () {
        'use strict';
        var total = 0;
        var i = arguments.length;
        while (i--) {
            if (typeof arguments[i] === 'number') {
                total %= arguments[i];
            }
        }

        return total;
    },
});

比较：

Handlebars.registerHelper({
    eq: function (v1, v2) {
        'use strict';

        return v1 === v2;
    },
    ne: function (v1, v2) {
        'use strict';

        return v1 !== v2;
    },
    lt: function (v1, v2) {
        'use strict';

        return v1 < v2;
    },
    gt: function (v1, v2) {
        'use strict';

        return v1 > v2;
    },
    lte: function (v1, v2) {
        'use strict';

        return v1 <= v2;
    },
    gte: function (v1, v2) {
        'use strict';

        return v1 >= v2;
    },
    and: function (v1, v2) {
        'use strict';

        return v1 && v2;
    },
    or: function (v1, v2) {
        'use strict';

        return v1 || v2;
    },
});

以及在对象中查找特定项目的功能：

Handlebars.registerHelper('getValueByPath', function () {
    'use strict';
    var options = arguments[arguments.length - 1];
    var result = options.data.root;

    // the options object is the last in the list of arguments; don't loop over it
    for (var i = 0; i < arguments.length - 1; i++) {
        try {
            result = result[arguments[i]];
        } catch (err) {
            return null;
        }
    }

    return result;
});

那么它可以像这样使用：

{{#each item}}
  {{#if (eq (getValueByPath "items" (add @index 1) "property") property)}}
    // do something
  {{else}}
    // do something else
  {{/if}}
{{/each}

【讨论】：

【解决方案2】：

我认为这对于 Handlebars 是不可能的。但是，您可以像这样访问每个循环中的当前索引或键： //对于数组 {{#每个数组}} {{@指数}} {{/每个}}

//for objects
{{#each object}}
  {{@key}}: {{this}}
{{/each}}

然后您可以创建一个助手来测试这两个值是否相等：

{{#each array}}
  {{#if isEqual @index}}
{{/each}}

//helper
Template.yourTemplate.helper = {
  isEqual: function(index){
    (yourData[index].var === yourData[index-1].var) ? true : false;
  }
};

编辑：这在 Spacebars 中暂时不可用！

【讨论】：

@index 目前在空格键中不可用，但它将在即将发布的版本中提供。

【解决方案3】：

您可以通过助手转换数据。这是一个使用小猫的例子......因为每个人都喜欢小猫，对吧？

Template.feline.helpers({
  kittens: function() {
    // fetch some kittens
    var kittens = Cats.find({_id: {$in: this.kittens}}).fetch();

    // keep track of the last kitten
    previousKitten = {};

    return _.map(kittens, function(kitten) {
      // add an isAwesome property based on the previous kitten
      if (previousKitten.eyeColor === kitten.eyeColor)
        kitten.isAwesome = true;

      previousKitten = kitten
      return kitten;
    });
  }
});

现在在{{#each kittens}} 迭代器内部，您可以测试isAwesome 是否存在。

【讨论】：