nathan-muir/test-non-reactive-sort-2.html

## test-non-reactive-sort-2.html
<head>
  <title>test-non-reactive-sort-2</title>
</head>

<body>
  {{> nonReactiveSort}}
</body>

<template name="nonReactiveSort">
  Page: <a href="#" data-action="page" data-n="-1">Prev</a> | <a href="#" data-action="page" data-n="1">Next</a>
  Current: {{currentPage}}

  <ul>
    {{! provides reactive data, based on static sorting}}
    {{#each items}}
      <li>
        {{name}} votes: {{votes}}, points: {{points}}, average: {{votingAverage}}
      </li>
    {{/each}}
  </ul>
</template>

## test-non-reactive-sort-2.js
if (Meteor.isClient){

  var ITEMS_PER_PAGE = 10;
  // Setup Collection & Dummy Data
  var collection = new Meteor.Collection(null);

  for(var i = 0; i <= 50; i++){
    collection.insert({_id: i+"", "name": "item " + i, "votes": 0, "points": 0, "votingAverage": 0});
  }

  // Randomly add votes to the data
  Meteor.setInterval(function(){
    var id = parseInt(Math.random() * 50); //
    var points = parseInt(Math.random() * 5); // 0-5 votes
    var item = collection.findOne({_id: id +""});
    collection.update({_id: id + ""}, {
      $inc: {
        votes: 1,
        points: points
      },
      $set: {
        votingAverage: Math.round(100 * (item.points + points) / (item.votes + 1))/ 100
      }
    });
  }, 300);

  // event handlers for changing pages
  UI.body.events({
    'click a[data-action="page"][data-n]': function(e){
      e.preventDefault();
      var n = (Session.get('page') || 0) + $(e.currentTarget).data('n');
      if (n < 0) n = 0;
      Session.set('page', n);

    }
  });

  // Special collection for holding the temporarily sorted results
  var retainedOrderingCollection = new Meteor.Collection(null);

  // rebuild the sorted results collection, on each page
  Deps.autorun(function(){
    Session.get('page'); // force observe / refresh when page changes

    retainedOrderingCollection.remove({});

    var currentRank = 0;
    var initial = true;
    // observe is automatically torn down when computation is invalidated
    // add each of the items with an enforced rank
    collection.find({}, {sort: {votingAverage: -1}}).observe({
      addedAt: function(document, atIndex){
        if(initial){
          document.rank = atIndex;
          currentRank = Math.max(currentRank, atIndex + 1);
          retainedOrderingCollection.insert(document)
        } else {
          document.rank = currentRank++;
          retainedOrderingCollection.insert(document);
        }
      },
      removed: function(document){
        retainedOrderingCollection.remove(document._id);
      },
      changed: function(document){
        var id = document._id;
        delete document._id;
        retainedOrderingCollection.update(id, {$set: document}); // keeps rank field
      }
    });
    initial = false;
  });

  Template.nonReactiveSort.helpers({
    'currentPage': function(){
      return Session.get('page') || 0
    },
    'items': function(){
      var page = Session.get('page') || 0;
      // return the items from the sorted collection, based on the forced rank
      return retainedOrderingCollection.find({}, {
        sort: {rank: 1},
        limit: ITEMS_PER_PAGE,
        skip: page * ITEMS_PER_PAGE});
    }
  });

}
	<head>
	<title>test-non-reactive-sort-2</title>
	</head>

	<body>
	{{> nonReactiveSort}}
	</body>

	<template name="nonReactiveSort">
	Page: <a href="#" data-action="page" data-n="-1">Prev</a> \| <a href="#" data-action="page" data-n="1">Next</a>
	Current: {{currentPage}}

	<ul>
	{{! provides reactive data, based on static sorting}}
	{{#each items}}
	<li>
	{{name}} votes: {{votes}}, points: {{points}}, average: {{votingAverage}}
	</li>
	{{/each}}
	</ul>
	</template>
	if (Meteor.isClient){

	var ITEMS_PER_PAGE = 10;
	// Setup Collection & Dummy Data
	var collection = new Meteor.Collection(null);

	for(var i = 0; i <= 50; i++){
	collection.insert({_id: i+"", "name": "item " + i, "votes": 0, "points": 0, "votingAverage": 0});
	}

	// Randomly add votes to the data
	Meteor.setInterval(function(){
	var id = parseInt(Math.random() * 50); //
	var points = parseInt(Math.random() * 5); // 0-5 votes
	var item = collection.findOne({_id: id +""});
	collection.update({_id: id + ""}, {
	$inc: {
	votes: 1,
	points: points
	},
	$set: {
	votingAverage: Math.round(100 * (item.points + points) / (item.votes + 1))/ 100
	}
	});
	}, 300);

	// event handlers for changing pages
	UI.body.events({
	'click a[data-action="page"][data-n]': function(e){
	e.preventDefault();
	var n = (Session.get('page') \|\| 0) + $(e.currentTarget).data('n');
	if (n < 0) n = 0;
	Session.set('page', n);

	}
	});

	// Special collection for holding the temporarily sorted results
	var retainedOrderingCollection = new Meteor.Collection(null);

	// rebuild the sorted results collection, on each page
	Deps.autorun(function(){
	Session.get('page'); // force observe / refresh when page changes

	retainedOrderingCollection.remove({});

	var currentRank = 0;
	var initial = true;
	// observe is automatically torn down when computation is invalidated
	// add each of the items with an enforced rank
	collection.find({}, {sort: {votingAverage: -1}}).observe({
	addedAt: function(document, atIndex){
	if(initial){
	document.rank = atIndex;
	currentRank = Math.max(currentRank, atIndex + 1);
	retainedOrderingCollection.insert(document)
	} else {
	document.rank = currentRank++;
	retainedOrderingCollection.insert(document);
	}
	},
	removed: function(document){
	retainedOrderingCollection.remove(document._id);
	},
	changed: function(document){
	var id = document._id;
	delete document._id;
	retainedOrderingCollection.update(id, {$set: document}); // keeps rank field
	}
	});
	initial = false;
	});

	Template.nonReactiveSort.helpers({
	'currentPage': function(){
	return Session.get('page') \|\| 0
	},
	'items': function(){
	var page = Session.get('page') \|\| 0;
	// return the items from the sorted collection, based on the forced rank
	return retainedOrderingCollection.find({}, {
	sort: {rank: 1},
	limit: ITEMS_PER_PAGE,
	skip: page * ITEMS_PER_PAGE});
	}
	});

	}