查看车把循环 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}
我有一个模板,我想在其中生成一些 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}