Javascript Meteor框架-如何处理订单更改_Javascript_Meteor

Javascript Meteor框架-如何处理订单更改

javascript meteor

Javascript Meteor框架-如何处理订单更改,javascript,meteor,Javascript,Meteor,这是一个按喜好排序的列表每当游标（barvy.find（{}，{sort:{likes:-1}}）定义的数据发生变化时，Meteor模板和反应系统就会自动重新提交html模板。所以现在屏幕上的列表总是按“喜欢”排序。如果第一个项目有50个喜欢，第二个项目有50个喜欢，我给第二个项目添加了一个喜欢，然后它会移动到屏幕上的第一个位置，因为光标返回的结果和第一个项目一样我的问题是：如何在有序列表中向上移动的项目上显示向上箭头，在向下移动的项目上显示向下箭头？因为DOM元素的创建是由Meteor处理

这是一个按喜好排序的列表

每当游标（

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>


{{>poradi}
波拉迪

{{{#每辆重型车}
{{barva}}，{{likes}
{{/每个}}

我想尝试使用唯一id存储旧位置，并将其与新位置进行比较。您可以通过扩展模板来编写额外的函数，例如（未测试代码，但逻辑应该可以工作）：
Template.HelloWorld.getArrow=函数（uniqueId，currentPosition）{
if（数组的类型[uniqueId]=='undefined'）{//如果没有旧数据
数组[唯一标识]=当前位置；
返回“same.png”；
}
oldPosition=数组[uniqueId]；
如果（旧位置<当前位置）{
arrow=“up.png”；
}
否则如果（旧位置>当前位置）{
arrow=“down.png”；
}
否则{
arrow=“same.png”；
}
数组[唯一标识]=当前位置；
返回箭头；
};

这就是如何在模板“HelloWorld”中调用它：


每次集合中的数据发生更改时，模板都会重新绘制，因此每个项目都会调用函数getArrow。
我想尝试使用唯一id存储旧位置，并将其与新位置进行比较。您可以通过扩展模板来编写额外的函数，例如（未测试代码，但逻辑应该可以工作）：
Template.HelloWorld.getArrow=函数（uniqueId，currentPosition）{
if（数组的类型[uniqueId]=='undefined'）{//如果没有旧数据
数组[唯一标识]=当前位置；
返回“same.png”；
}
oldPosition=数组[uniqueId]；
如果（旧位置<当前位置）{
arrow=“up.png”；
}
否则如果（旧位置>当前位置）{
arrow=“down.png”；
}
否则{
arrow=“same.png”；
}
数组[唯一标识]=当前位置；
返回箭头；
};

这就是如何在模板“HelloWorld”中调用它：


每次集合中的数据发生更改时，模板都会重新绘制，因此每个项目都会调用函数getArrow。
如果我正确理解了这个问题，您想知道每次单击如何对应一个呈现的项目。有几种方法可以做到这一点，但最简单的方法就是在单独的模板中呈现每个列表项。下面是一个完整的工作示例：
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>

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

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

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>

为了便于初始化，我使用了客户端本地的集合，因此每次刷新页面时它都会重置。关键是，如果您在自己的模板中呈现每个项目，

单击

事件仅引用该项目，因此您可以访问该项目。_id

当用户通过单击箭头手动排序项目时，您是否打算以某种方式修改数据库，或者，您希望排序顺序只是临时的，并且对用户来说是本地的吗？David：没有用户不通过单击箭头对项目进行排序。用户添加“likes”（点击like按钮），meteor会自动对其排序，因为游标查询中的游标是按“likes”排序的。这些箭头应该显示哪些项目在向上方向上改变了位置（只是为了让用户直观地检测到某些项目变得更好（更喜欢））。啊，好吧，从提问的方式来看，这确实不清楚。希望我的回答能有所帮助……当用户通过单击箭头手动对项目进行排序时，您是否打算以某种方式修改数据库，或者您是否希望排序顺序只是临时的且对用户来说是本地的？David：没有用户不通过单击箭头对项目进行排序。用户添加“likes”（点击like按钮），meteor会自动对其排序，因为游标查询中的游标是按“likes”排序的。这些箭头应该显示哪些项目在向上方向上改变了位置（只是为了让用户直观地检测到某些项目变得更好（更喜欢））。啊，好吧，从提问的方式来看，这确实不清楚。希望我的回答能对你有所帮助。。。

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

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;
    }
  });
}