1

它是按喜欢排序的列表。

barvy.find({}, {sort:{likes: -1}})每当由 cursor( )定义的数据发生变化时，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>
4

2 回答 2

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。

于 2013-05-26T11:23:38.387 回答
0

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

喜欢.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>

喜欢.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.

于 2013-05-26T16:36:29.587 回答