Meteor Framework - 如何处理订单变更答案

【问题标题】：Meteor Framework - how handle order changeMeteor Framework - 如何处理订单变更
【发布时间】：2013-05-26 00:20:21
【问题描述】：

这是按喜欢排序的列表。

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

【问题讨论】：

当用户通过单击箭头手动对项目进行排序时，您是否打算以某种方式修改数据库，或者您希望该排序顺序对用户来说只是临时的和本地的？跨度>
大卫：没有用户不会通过点击箭头对项目进行排序。用户添加“点赞”（点击点赞按钮），流星自行排序，因为游标查询中的游标按“点赞”排序。这些箭头应该显示哪些项目在向上方向改变了它们的位置（只是为了让用户视觉检测某些项目变得更好（更多喜欢）。
啊，好吧，从提出问题的方式来看，这真的不清楚。希望我的回答会有所帮助...

标签： javascript meteor

【解决方案1】：

我想尝试一些方法来存储具有唯一 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。

【讨论】：

【解决方案2】：

如果我正确理解了这个问题，您想知道每次点击如何对应于呈现的项目。有几种方法可以做到这一点，但最简单的方法是在单独的模板中呈现每个列表项。这是一个完整的工作示例：

likes.html

<body>
  <h1>Items to like</h1>
  {{> itemsList}}
</body>

<template name="itemsList">
  <ul>
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
</template>

<template name="item">
  <li>
    {{text}} ({{likes}})
    <button class='up'>Up</button>
    <button class='down'>Down</button>
  </li>
</template>

likes.js

if (Meteor.isClient) {
  Items = new Meteor.Collection(null);

  Meteor.startup(function () {
    Items.insert({text: 'apples', likes: 10});
    Items.insert({text: 'grapes', likes: 8});
    Items.insert({text: 'pears', likes: 6});
    Items.insert({text: 'oranges', likes: 4});
  });

  Template.itemsList.items = function () {
    return Items.find({}, {sort: {likes: -1}});
  };

  Template.item.events({
    'click .up' : function () {
      Items.update(this._id, {$inc: {likes: 1}});
      return false;
    },
    'click .down' : function () {
      Items.update(this._id, {$inc: {likes: -1}});
      return false;
    }
  });
}

为了方便初始化，我使用了客户端本地的集合，因此每次刷新页面时它都会重置。关键见解是，如果您在其自己的模板中呈现每个项目，click 事件仅引用该项目，因此您可以访问 this._id。

【讨论】：