mounibec/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Test


Run the code using meteor command line
Open a meteor shell
Insert new data using: Articles.insert({title: "This is a new article", pubdate: new Date})


## articles.html
<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>

## articles.js
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;
    });
}
	<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>
	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;
	});
	}