查看车把循环 MeteorJS 中的上一个项目

Looking at previous item in handlebars loop MeteorJS

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

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

如何访问上一个项目?

我认为这对于 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;
  }
};

编辑:目前在空格键中不可用!

您可以通过您的助手转换您的数据。这是一个使用小猫的示例...因为每个人都喜欢小猫,对吗?

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.

是否存在

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

数学:

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}