Meteor - 从 jquery-ui 可拖动“开始”事件更新模板数据

Question

我有一组可以移动的元素。我按照他们最后一次搬家的时间对收藏品进行排序。

Cards.find({},{sort:{moved:1}});

当我开始拖动一个元素时，我想更新moved 属性，但我不想在完成拖动之前更新数据库。

这是我的尝试：

Template.cardItem.rendered = function() {
    $('.card-item').draggable({
        handle: '.card-handle',
        start: function(evt, ui) {
            var data = Blaze.getData(evt.target);
            data.moved = new Date().getTime(); // not working
        },
        stop: function(evt, ui) {
            var card = {
                _id: $(this).attr('id'),
                left: ui.position.left,
                top: ui.position.top
            };
            Meteor.call('cardMove', card, function(error, result) {
                if (error) {
                    console.log(error);
                }
            });
        }
    })
};

我想我的问题是我不知道如何从 jQuery 上下文访问模板实例。

Answer 1

我通常使用：Template.currentData()

也许你对无法从 jQuery 上下文获取数据是正确的，我也不确定。

这是使用 Session 或自定义 ReactiveDict 的完美场景，请参阅documentation。

你也可以这样做：

this.autorun(function(computation){
    var data = Template.currentData(); //this is a reactive dependency
    if(computation.firstRun){
        //init your jquery code
    }
});

然后您在 jQuery 代码中访问数据。您需要创建自动运行并检查第一次运行的原因是避免每次数据更改时运行 jQuery 代码。我在使用 Template.rendered 创建小部件时遇到了严重的性能问题。

在你的情况下，我认为使用 Session/ReactiveDict 是要走的路。从长远来看，它提供了更大的灵活性。

注意： 我不喜欢 Meteor 方法，我认为它与 Meteor 工作流程背道而驰。使用allow/deny规则会更简单，直接通过minimongo插入。