该列表按喜欢排序。
每当cursor(barvy.find({}, {sort:{likes: -1}})
)定义的数据更改时,流星模板和反应性系统都会自动重新呈现html模板。因此,现在屏幕上的列表始终按“喜欢”排序。如果第一个项目有50个点赞,第二个项目有50个点赞并且我在第二个项目中添加了一个点赞,则它会移动到屏幕上的第一个位置,因为光标会像第一个项目一样返回它。
我的问题是:如何在有序列表中向上移动的项目上显示向上箭头,而在向下移动的项目上显示向下箭头?因为DOM元素的创建是由Meteor处理的,所以我不知道如何获取有关哪些元素会更改其位置的信息。
Template.poradi.barvy = function () {
return barvy.find({}, {sort:{likes: -1}});
};
HTML模板:
<body>
{{> poradi}}
</body>
<template name="poradi">
<h2>Poradi</h2>
<ul>
{{#each barvy}}
<li>{{barva}}, {{likes}} <input type="button" id="button_{{barva}}" value="like" /></li>
{{/each}}
</ul>
</template>
最佳答案
我想尝试一些使用唯一ID存储旧职位并将其与新职位进行比较的方法。您可以通过扩展模板来编写额外的功能,例如(未经测试的代码,但是逻辑应该起作用):
Template.HelloWorld.getArrow = function(uniqueId, currentPosition) {
if(typeof array[uniqueId] == 'undefined') { // If there is no old data
array[uniqueId] = currentPosition;
return "same.png";
}
oldPosition = array[uniqueId];
if(oldPosition < currentPosition) {
arrow = "up.png";
}
else if(oldPosition > currentPosition) {
arrow = "down.png";
}
else {
arrow = "same.png";
}
array[uniqueId] = currentPosition;
return arrow;
};
那就是如何在模板“ HelloWorld”中调用它:
<img src="{{getArrow "itemId" "positionNumber"}}">
每次更改集合中的数据时,都会重新绘制模板,因此将为每个项目调用getArrow函数。