- Run the code using
meteorcommand line - Open a
meteor shell - Insert new data using:
Articles.insert({title: "This is a new article", pubdate: new Date})
Last active
January 25, 2016 00:34
-
-
Save mounibec/9bc90953eb9f3e04a2b3 to your computer and use it in GitHub Desktop.
Twitter like notifications using Meteor.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <title>Articles</title> | |
| </head> | |
| <body> | |
| {{> ArticlesList}} | |
| </body> | |
| <template name="ArticlesList"> | |
| <div class="btn-group" role="group" aria-label="..."> | |
| <button id="clean" type="button" class="btn btn-default">Clean</button> | |
| </div> | |
| <div class="container"> | |
| <h3>Articles</h3> | |
| {{#if newArticles}} | |
| <a id="show" href="#"> | |
| <div class="alert alert-info" role="alert">new article</div> | |
| </a> | |
| {{/if}} | |
| <div class="row container-fluid"> | |
| <div class="articles-list"> | |
| <ul class="list-group"> | |
| {{#each listOfArticles}} | |
| <li class="list-group-item"> | |
| <div class="subject"> | |
| <span>{{title}}</span> | |
| </div> | |
| </li> | |
| {{/each}} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Articles = new Mongo.Collection('articles'); | |
| Articles.allow({ | |
| remove: ()=> true | |
| }); | |
| const DOC_LIMIT = 10; | |
| latestArticles = Articles.find({}, {sort: {pubdate: -1}, limit: DOC_LIMIT}); | |
| if (Meteor.isClient) { | |
| let articlesReady = false; | |
| newArticles = new ReactiveVar( false ); | |
| Tracker.autorun(()=> { | |
| newArticles.set(Articles.find({show: false}).count() > 0); | |
| }); | |
| showArticle = function (article, id, show = true) { | |
| article.show = show; | |
| Articles._collection.update({_id: id}, article); | |
| }; | |
| latestArticles.observeChanges({ | |
| addedBefore: (id, article, before)=> { | |
| if (articlesReady) { | |
| showArticle(article, id, false); | |
| } | |
| else { | |
| showArticle(article, id); | |
| } | |
| } | |
| }); | |
| Meteor.subscribe("articles", { | |
| onReady: function () { | |
| articlesReady = true; | |
| }, | |
| onError: function () { | |
| console.error("articles subscribe Error", arguments); | |
| } | |
| }); | |
| Template.ArticlesList.helpers({ | |
| listOfArticles: ()=> { | |
| return Articles.find({show: true}, {sort: {pubdate: -1}}); | |
| }, | |
| newArticles: ()=> { | |
| return newArticles.get(); | |
| } | |
| }); | |
| Template.ArticlesList.events({ | |
| "click #show": (e, tmpl)=> { | |
| e.preventDefault(); | |
| latestArticles.fetch().forEach(article => showArticle(article, article._id)); | |
| }, | |
| "click #clean": ()=> { | |
| Articles.find().fetch().forEach(a => Articles.remove({_id: a._id})); | |
| } | |
| }); | |
| } | |
| if (Meteor.isServer) { | |
| Meteor.publish('articles', function () { | |
| return latestArticles; | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment