该列表按喜欢排序。

每当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函数。

10-05 20:25
查看更多