gpt4 book ai didi

javascript - Meteor Framework - 如何处理订单更改

转载 作者:行者123 更新时间:2023-11-28 02:13:19 24 4
gpt4 key购买 nike

这是按喜欢排序的列表。

只要光标(barvy.find({}, {sort:{likes: -1}})) 定义的数据发生变化,Meteor 模板和 react 系统就会自动重新渲染 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 函数。

关于javascript - Meteor Framework - 如何处理订单更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16755114/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com