简体   繁体   English

我如何重置客户端订阅

[英]How do i Meteor Reset client subscription

i have subscribe and publish like this : 我订阅并发布如下:

publish.js : publish.js:

Meteor.publish('ProductWithSkipAndLimit', function(skip,limit){
return Product.find({}, {
        sort: {
            createdAt: 1
        },
        skip: skip,
        limit: limit
    });
});

subscribe.js : subscribe.js:

Meteor.subscribe('ProductWithSkipAndLimit',0,10);

and it will return to client 10 products from 0 sort by createdAt. 并且它将从createAt的0排序返回到客户端10产品。 Nah i have an event click like this : 不,我点击这样的事件:

'click' : function(e){
e.preventDefault();
Meteor.subscribe('ProductWithSkipAndLimit',10,10);
}

I want to get 10 more products. 我想再买10个产品。 okay i get that products, but 10 products not reset. 好吧,我得到的产品,但10个产品没有重置。 so on client i have 20 products. 所以在客户端我有20个产品。

how i can reset client subscription? 我如何重置客户端订阅? so client only have 10 products every subscribe. 所以客户每个订阅只有10个产品。

Meteor.subscribe: Meteor.subscribe:

Subscribe to a record set. 订阅记录集。 Returns a handle that provides stop() and ready() methods. 返回提供stop()和ready()方法的句柄。

You need to take handle of Meteor.subscribe 您需要处理Meteor.subscribe

subscription = Meteor.subscribe('ProductWithSkipAndLimit',10,10);

And in events object : 并在事件对象中:

var subscription;

Template.NAME.events({
    'click' : function(e){
      e.preventDefault();
      subscription && subscription.stop();
      subscription = Meteor.subscribe('ProductWithSkipAndLimit',10,10);
    }
})

I think, in click event you have to set Session variable Session.set('more', true); 我认为,在click事件中你必须设置Session变量Session.set('more', true);

On client: 在客户端:

Deps.autorun(function() {
   if(Session.get('more')) {
     Meteor.subscribe('ProductWithSkipAndLimit',10,10);
     Session.set('more', false);
   }
});

Or some logic to set current position in collection (10, 20, etc.) 或者在集合中设置当前位置的一些逻辑(10,20等)

You asked about subscription resetting, but it looks like there is no need to do it manually in your case. 您询问了订阅重置问题,但看起来在您的情况下无需手动执行此操作。

You can subscribe within Tracker.autorun and pass reactive values as subscription parameters. 您可以在Tracker.autorun中订阅并将反应值作为订阅参数传递。

Then on each skip / limit session variable change the subscription will be reset automatically. 然后在每个skip / limit会话变量上更改订阅将自动重置。

From Meteor official documentation : 来自Meteor官方文档

If you call Meteor.subscribe within a reactive computation, for example using Tracker.autorun, the subscription will automatically be cancelled when the computation is invalidated or stopped; 如果您在反应计算中调用Meteor.subscribe,例如使用Tracker.autorun,则在计算失效或停止时,订阅将自动取消; it's not necessary to call stop on subscriptions made from inside autorun. 没有必要对从autorun内部进行的订阅调用stop。

Here is working example (METEOR@1.1.0.2): 这是工作示例(METEOR@1.1.0.2):

Items = new Meteor.Collection("items");

if(Meteor.isClient) {
    Tracker.autorun(function() {
        Meteor.subscribe("items", Session.get("skip"), Session.get("limit"));
    });

    Template.main.helpers({
        items: function() {
            return Items.find({});
        }
    });

    Template.main.events({
        'click #next' : function(e){
            e.preventDefault();
            var skip = Session.get("skip");
            Session.set("skip", skip + Session.get("limit"));
        },   
        'click #prev' : function(e){
            e.preventDefault();
            var skip = Session.get("skip");
            Session.set("skip", skip - Session.get("limit"));
        }
    });

    Meteor.startup(function() {
        Session.set("skip", 0);
        Session.set("limit", 10);
    });
}

if(Meteor.isServer) {
    if (Items.find({}).fetch().length < 100) {
        _.times(100, function(n) {
            Items.insert({
                name: String(n),
                createdAt: new Date()
            });
        });
    }

    Meteor.publish("items", function(skip, limit) {        
        return Items.find({}, { limit: limit, skip: skip, sort: { createdAt: 1} });
    });
}

template 模板

<template name="main">
    <header>
        <h1>Items</h1>
        <nav>
            <button id="prev">prev</button>
            <button id="next">next</button>
        </nav>
    </header>
    <ul>
    {{#each items}}
        <li>{{name}}</li>
    {{/each}}
    </ul>
</template>

PS Don't forget to remove "autopublish" package PS别忘了删除“autopublish”包

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM