working on template level controllers

This commit is contained in:
Sacha Greif 2015-04-29 14:38:14 +09:00
parent 6d7451fa87
commit 44d3768d62
8 changed files with 149 additions and 152 deletions

View file

@ -0,0 +1,3 @@
<template name="postsListController">
{{> posts_list context}}
</template>

View file

@ -0,0 +1,119 @@
// see https://www.discovermeteor.com/blog/template-level-subscriptions/
// this template acts as the controller that sets and
// manages the reactive context for the embedded postsList template
Template.postsListController.created = function () {
// 1. Initialization
var instance = this;
// var terms = instance.data.terms; // get terms from context passed to controller
// terms need to be reactive too!
// initialize the reactive variables
instance.postsLoaded = new ReactiveVar(0);
instance.terms = new ReactiveVar(instance.data.terms);
// instance.postsLimit = new ReactiveVar(Settings.get('postsPerPage', 10));
console.log("// terms initialized: ")
console.log(instance.terms.get())
// 2. Autorun
// this autorun is there just to reset the post limit
// when current date changes (i.e. we're switching page)
// instance.autorun(function () {
// // just by including this session variable in the autorun, we automatically make it depend on it
// console.log('resetting…')
// var currentDate = Session.get('currentDate');
// instance.postsLimit.set(Settings.get('postsPerPage', 10));
// });
// will re-run when terms changes
instance.autorun(function () {
var termsGet = instance.terms.get();
// var termsGet = {
// view: "top",
// limit: 7,
// category: undefined,
// query: ""
// };
// var postsLimit = instance.postsLimit.get();
console.log('\n\n// autorun')
// get the postsLimit
// instance.terms.set(_.extend(terms, {limit: postsLimit}));
console.log(termsGet)
// console.log("Asking for " + terms.limit + " posts…")
// subscribe
var postsSubscription = instance.subscribe('postsList', termsGet);
var usersSubscription = instance.subscribe('postsListUsers', termsGet);
// if subscriptions are ready, set limit to newLimit
if (instance.subscriptionsReady()) {
console.log("> Received "+termsGet.limit+" posts. \n\n")
instance.postsLoaded.set(termsGet.limit);
} else {
console.log("> Subscription is not ready yet. \n\n");
}
});
// 3. Cursor
instance.getPostsCursor = function() {
console.log('loaded ' + instance.postsLoaded.get() + ' posts\n\n')
var termsGet = _.clone(instance.terms.get());
var termsLoaded = _.extend(termsGet, {limit: instance.postsLoaded.get()});
var parameters = Posts.getSubParams(termsLoaded);
return Posts.find(parameters.find, parameters.options);
};
};
Template.postsListController.helpers({
context: function () {
// create context for postsList module
var instance = Template.instance();
var postsCursor = instance.getPostsCursor();
var context = {
// posts cursor
postsCursor: postsCursor,
// posts subscription readiness, used to show spinner
postsReady: instance.subscriptionsReady(),
// whether to show the load more button or not
hasMorePosts: postsCursor.count() >= instance.terms.get().limit,
// what to do when user clicks "load more"
loadMoreHandler: function (instance) {
event.preventDefault();
var termsGet = _.clone(instance.terms.get());
// increase limit by 5 and update terms
termsGet.limit += Settings.get('postsPerPage', 10);
instance.terms.set(termsGet);
// get current value for limit, i.e. how many posts are currently displayed
// var limit = instance.postsLimit.get();
// // increase limit by 5 and update it
// limit += Settings.get('postsPerPage', 10);
// instance.postsLimit.set(limit);
},
// the current instance
controllerInstance: instance
};
return context;
}
});

View file

@ -33,7 +33,7 @@ Posts.getProperties = function (post) {
*/
Posts.getSubParams = function (terms) {
var maxLimit = 200;
var maxLimit = 20;
// console.log(terms)

View file

@ -4,7 +4,7 @@ Posts.controllers = {};
Posts.controllers.list = RouteController.extend({
template: 'posts_list',
template: 'postsListController',
onBeforeAction: function () {
var showViewsNav = (typeof this.showViewsNav === 'undefined') ? true : this.showViewsNav;
@ -15,61 +15,28 @@ Posts.controllers.list = RouteController.extend({
this.next();
},
subscriptions: function () {
// take the first segment of the path to get the view, unless it's '/' in which case the view default to 'top'
// note: most of the time this.params.slug will be empty
this._terms = {
data: function () {
var terms = {
view: this.view,
limit: this.params.limit || Settings.get('postsPerPage', 10),
category: this.params.slug
};
if(Meteor.isClient) {
this._terms.query = Session.get("searchQuery");
terms.query = Session.get("searchQuery");
}
this.postsListSub = coreSubscriptions.subscribe('postsList', this._terms);
this.postsListUsersSub = coreSubscriptions.subscribe('postsListUsers', this._terms);
},
data: function () {
if(Meteor.isClient) {
this._terms.query = Session.get("searchQuery");
}
var parameters = Posts.getSubParams(this._terms),
postsCount = Posts.find(parameters.find, parameters.options).count();
parameters.find.createdAt = { $lte: Session.get('listPopulatedAt') };
var posts = Posts.find(parameters.find, parameters.options);
// Incoming posts
parameters.find.createdAt = { $gt: Session.get('listPopulatedAt') };
var postsIncoming = Posts.find(parameters.find, parameters.options);
Session.set('postsLimit', this._terms.limit);
console.log('-----------------\nrouter running')
console.log(terms)
// note: the post list controller template will handle all subscriptions, so we just need to pass in the terms
return {
title: this.getTitle(),
incoming: postsIncoming,
postsCursor: posts,
postsCount: postsCount,
postsReady: this.postsListSub.ready(),
hasMorePosts: this._terms.limit == postsCount,
loadMoreHandler: function () {
var count = parseInt(Session.get('postsLimit')) + parseInt(Settings.get('postsPerPage', 10));
var categorySegment = Session.get('categorySlug') ? Session.get('categorySlug') + '/' : '';
// TODO: use Router.path here?
Router.go('/' + Session.get('view') + '/' + categorySegment + count);
}
};
terms: terms
}
},
getTitle: function () {
return i18n.t(this.view);
return i18n.t("this.view");
},
getDescription: function () {
@ -80,10 +47,6 @@ Posts.controllers.list = RouteController.extend({
}
},
onAfterAction: function() {
Session.set('view', this.view);
},
fastRender: true
});

View file

@ -66,6 +66,8 @@ Package.onUse(function (api) {
'lib/client/templates/post_view_nav.js',
'lib/client/templates/postList/posts_list.html',
'lib/client/templates/postList/posts_list.js',
'lib/client/templates/postList/postsListController.html',
'lib/client/templates/postList/postsListController.js'
], ['client']);
api.add_files([

View file

@ -2,5 +2,5 @@
{{#if showDateNav}}
{{> singleDayNav}}
{{/if}}
{{> posts_list context}}
{{> postsListController context}}
</template>

View file

@ -1,109 +1,16 @@
// see https://www.discovermeteor.com/blog/template-level-subscriptions/
// this template acts as the controller that sets and
// manages the reactive context for the embedded postsList template
Template.singleDay.created = function () {
// 1. Initialization
var instance = this;
// initialize the reactive variables
instance.postsLoaded = new ReactiveVar(0);
instance.postsLimit = new ReactiveVar(Settings.get('postsPerPage', 10));
instance.getTerms = function () {
// if instance has a set date use this, else depend on Session variable
var currentDate = (!!instance.data && !!instance.data.date) ? instance.data.date: Session.get('currentDate');
return {
view: 'singleday',
after: moment(currentDate).startOf('day').toDate(),
before: moment(currentDate).endOf('day').toDate()
};
};
// 2. Autorun
// this autorun is there just to reset the post limit
// when current date changes (i.e. we're switching page)
instance.autorun(function () {
// just by including this session variable in the autorun, we automatically make it depend on it
var currentDate = Session.get('currentDate');
instance.postsLimit.set(Settings.get('postsPerPage', 10));
});
// will re-run when postsLimit or currentDate change
instance.autorun(function () {
var terms = instance.getTerms();
// get the postsLimit
terms.limit = instance.postsLimit.get();
// console.log("Asking for " + terms.limit + " posts…")
// subscribe
var postsSubscription = instance.subscribe('postsList', terms);
var usersSubscription = instance.subscribe('postsListUsers', terms);
// if subscriptions are ready, set limit to newLimit
if (instance.subscriptionsReady()) {
// console.log("> Received "+terms.limit+" posts. \n\n")
instance.postsLoaded.set(terms.limit);
} else {
// console.log("> Subscription is not ready yet. \n\n");
}
});
// 3. Cursor
instance.getPostsCursor = function() {
// console.log('loaded ' + instance.postsLoaded.get() + ' posts')
var termsLoaded = _.extend(instance.getTerms(), {limit: instance.postsLoaded.get()});
var parameters = Posts.getSubParams(termsLoaded);
return Posts.find(parameters.find, parameters.options);
};
};
Template.singleDay.helpers({
showDateNav: function () {
return (typeof this.showDateNav === 'undefined') ? true : this.showDateNav;
},
context: function () {
// create context for postsList module
var instance = Template.instance();
var postsCursor = instance.getPostsCursor();
var context = {
// posts cursor
postsCursor: postsCursor,
// posts subscription readiness, used to show spinner
postsReady: instance.subscriptionsReady(),
// whether to show the load more button or not
hasMorePosts: postsCursor.count() >= instance.postsLimit.get(),
// what to do when user clicks "load more"
loadMoreHandler: function (instance) {
event.preventDefault();
// get current value for limit, i.e. how many posts are currently displayed
var limit = instance.postsLimit.get();
// increase limit by 5 and update it
limit += Settings.get('postsPerPage', 10);
instance.postsLimit.set(limit);
},
// the current instance
controllerInstance: instance
// if instance has a set date use this, else depend on Session variable
var currentDate = (!!this.date) ? this.date: Session.get('currentDate');
return {
terms: {
view: 'singleday',
after: moment(currentDate).startOf('day').toDate(),
before: moment(currentDate).endOf('day').toDate()
}
};
return context;
}
});

View file

@ -12,6 +12,9 @@ PostsSingledayController = RouteController.extend({
data: function() {
var currentDate = this.params.day ? new Date(this.params.year, this.params.month-1, this.params.day) : Session.get('today');
Session.set('currentDate', currentDate);
return {
date: currentDate
}
},
getTitle: function () {