Question

这是按喜欢排序的列表。

当光标（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>

Answer 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。

Answer 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。

Meteor Framework - 如何处理订单更改

2 个答案: