我有一个空集合,我只想在客户端做出反应。目前,在呈现模板时,从服务器端集合中复制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('/');
}
})
}
});
答案 0 :(得分:2)
如果有人想知道它是如何完成的,我想出来了。
以下是我的模板,所以答案更有意义:
<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('/');
}
})
}
});