javascript - 使用 jQuery 拖动后从模板中获取信息

Question

当我停止拖动照片时，我试图从照片中获取用户 ID。我正在将 Meteor 与 JQueryUI Draggable 一起使用。当渲染照片时，我将用户打印到控制台，该控制台工作正常并正确提供唯一的用户 ID。但是，当我拖动然后停止时，它会错误地返回最后渲染照片的用户 ID。

我有这个html

<template name="Gallery">
    <ul id="gallery-photos">
        {{#each photos}}
            {{> galleryPhoto}}
        {{/each}}
    </ul>
</template>

<template name="galleryPhoto">
    <li>
        <img src=""/>
    </li>
</template>

还有这个 JS

Template.galleryPhoto.rendered = function () {
    var img = this.find('img');

    var user = Meteor.users.findOne({_id: this.data.user});
    console.log(user); //Logs unique user ID for every photo rendered

    var time = this.data.timestamp; // "1431998534049"
    var path = this.data.user + "_" + time + ".jpg";

    img.src = path;

    $('li').draggable({
        axis: "x"
    },
    stop: function () {
        var left = $(this).position().left;
        if(left > 0) {
            $(this).remove();
            console.log(user); //Logs the ID of the last photo created
        }
    }); 
};

有什么方法可以让正确的用户拖动停止吗？我确信 Meteor 执行此操作的方法是涉及模板事件而不是 jQuery 回调，但我仍然相当缺乏经验，不确定如何进行此操作。

Answer 1

当您每次渲染新图像时执行 $('li') 操作时，您会覆盖页面上所有 li 元素的拖动监听器。要在模板上下文中选择 DOM 元素，请使用 this.$('li')

Meteor doc

关闭，因为您可以自由地为您的 li 元素提供唯一的 id 并按照老方法进行操作。这取决于你