Question

我正在尝试制作类似于twitter的新闻源，其中新的记录未添加到UI（出现带有新记录的按钮），但是更新会对UI进行反应性更改。

我有一个名为NewsItems的集合，我使用基本的反应光标（NewsItems.find（{}））作为我的Feed。 UI是一个带有每个循环的Blaze模板。订阅在路由级别（铁路由器）上完成。

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

谢谢，

Answer 1

诀窍是在NewsItem Collection Say show上有一个属性，它是一个布尔值。 NewsItem的默认值show应为false

每个循环只显示包含show == true的Feed并且按钮应显示show == false所有项目的计数

在按钮上点击更新集合中show == false到show = true的所有元素这将确保显示所有Feed。

当新的Feed出现时，按钮计数也会反应性增加。

希望这有助于

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

3 个答案: