Question

我有一个空集合，我只想在客户端做出反应。目前，在呈现模板时，从服务器端集合中复制null集合。然后，模板提供来自null集合的数据。用户单击按钮并调用meteor方法来更新服务器端集合。我希望null集合能够更新，以便在用户点击后立即显示另一组图像 - 但是因为它不会被反应而不会发生。我尝试使用deps功能，但我输了。

这是我的客户端代码：

var tempCovers = new Meteor.Collection(null);
var coversDep = new Deps.Dependency;

var getCovers = function(){
    coversDep.depend();
    console.log("covers gotten");
    return tempCovers;
}

var setCovers = function(comic){
    tempCovers.update({_id: comic._id}, {$inc: {score:1}});
    coversDep.changed();
    console.log("covers set");
}

Template.covers.rendered = function(){
    covers = Covers.find().fetch();
    tempCovers.insert(covers);
}

Template.covers.events({
    'click .comic-cover': function(e){
        var title = $(e.target).data('title');
        comic = Covers.findOne({title: title});
        setCovers(comic);

        Meteor.call('vote', title, function(error,id){
            clearErrors(); 
            if(error){
                throwError(error.reason, 'error');
            } else {
                throwError('Voted!', 'success');
                Router.go('/');
            }
        })
    }
});

Answer 1

如果有人想知道它是如何完成的，我想出来了。

以下是我的模板，所以答案更有意义：

<template name="covers">
    <h3 class="centered">Which Cover Do You Prefer?</h3>
    <div class="covers wrapper">
    {{#each cover}}
        <div class="comic-wrapper pure-u-1-2 centered" data-title="{{title}}">
            <a href="#" class="comic-cover" data-title="{{title}}"><img src="{{thumbnail.path}}/portrait_uncanny.{{thumbnail.extension}}" alt="{{title}}" data-title="{{title}}"/></a>
            <h5 class="centered">{{title}}</h5>
        </div>
    {{/each}}
    </div>
</template>

我必须创建一个模板助手，它返回对getCovers函数的调用。 getCovers函数如下所示：

var getCovers = function(){

    //set the dependency
    coversDep.depend();

    var arrayCovers = tempCovers.find().fetch();

    //get 2 random objects from arrayCovers
    var sampledCovers = _.sample(arrayCovers[0],2);

    return sampledCovers;
}

这将获取我的2个随机对象并将它们返回给模板助手，然后将其发送到模板。

Laslty，我不得不在触发click事件时调用setCovers来触发依赖项更改。

var setCovers = function(comic){
    coversDep.changed();
}

Template.covers.events({
    'click .comic-cover': function(e){
        var title = $(e.target).data('title');

        //make a call to show that the reactive data source has changed
        setCovers();

        Meteor.call('vote', title, function(error,id){
            clearErrors(); 
            if(error){
                throwError(error.reason, 'error');
            } else {
                throwError('Voted!', 'success');
                Router.go('/');
            }
        })
    }
});

在Meteor中使客户端空集合处于被动状态

1 个答案: