没有更新 UI 添加记录的反应游标

Question

我正在尝试制作类似于 twitter 的新闻源，其中新记录不会添加到 UI（出现一个带有新记录计数的按钮），但会更新，反应性地更改 UI .

我有一个名为 NewsItems 的集合，我为我的提要使用了一个基本的反应式游标 (NewsItems.find({}))。 UI 是一个带有 each 循环的 Blaze 模板。订阅是在路由级别（iron router）上完成的。

知道如何使用流星反应来实现这种行为吗？

谢谢，

Answer 1

诀窍是在 NewsItem 集合中再添加一个属性 Say show，这是一个布尔值。 NewsItem 应具有默认值 show 作为 false

Each Loop 应该只显示带有 show == true 的 Feed，按钮应该显示带有 show == false

的所有项目的数量

单击按钮将集合中的所有元素从 show == false 更新为 show = true 这将确保显示您的所有提要。

随着新提要的到来，按钮数量也会相应地增加。

希望对您有所帮助

Answer 2

思路是更新本地合集(yourCollectionArticles._collection)：所有文章默认都是{show: false} 除了第一个数据列表（为了不出现白页）。

您使用以下方式检测第一个收集负载：

Meteor.subscribe("articles", {
        onReady: function () {
            articlesReady = true;
        }
    });

然后您使用

观察新添加的数据

newsItems = NewsItems.find({})

newsItems.observeChanges({
        addedBefore: (id, article, before)=> {
            if (articlesReady) {
                article.show = false;
                NewsItems._collection.update({_id: id}, article);
            }
            else {
                article.show = true;
                NewsItems._collection.update({_id: id}, article);
            }
        }
});

这是一个工作示例：https://gist.github.com/mounibec/9bc90953eb9f3e04a2b3。

Answer 3

最后我使用当前日期/时间的会话变量来管理它：

Template.newsFeed.onCreated(function () {
var tpl           = this;
tpl.loaded      = new ReactiveVar(0);
tpl.limit       = new ReactiveVar(30);
Session.set('newsfeedTime', new Date());

tpl.autorun(function () {
  var limit = tpl.limit.get();
  var time  = Session.get('newsfeedTime');

  var subscription = tpl.subscribe('lazyload-newsfeed', time, limit);
  var subscriptionCount = tpl.subscribe('news-count',  time);

  if (subscription.ready()) {
   tpl.loaded.set(limit);
  }
});

tpl.news = function() {
   return NewsItems.find({creationTime: {$lt: Session.get('newsfeedTime')}},
                    {sort: {relevancy: -1 }},
                    {limit: tpl.loaded.get()});
 },

 tpl.countRecent = function() {
   return Counts.get('recentCount');
 },

  tpl.displayCount = function() {
    return Counts.get('displayCount');
  }
});

Template.newsFeed.events({
   'click .load-new': function (evt, tpl) {
     evt.preventDefault();
     var time            = new Date();
     var limit          = tpl.limit.get();
     var countNewsToAdd  = tpl.countRecent();
     limit += countNewsToAdd;
     tpl.limit.set(limit);
     Session.set('newsfeedTime', new Date());
   }
});

没有更新 UI 添加记录的反应游标

Reactive cursor without updating UI for added record

reactive-programming

meteor

meteor-blaze