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

## test-non-reactive-sort-1.html
<head>
  <title>test-non-reactive-sort-1</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>
    {{! helper is reactive based on page, but results are not reactive}}
    {{#each items}}
      <li>
        {{! have a separate helper get the data for the item, that is reactive}}
        {{#with item}}
          {{name}} votes: {{votes}}, points: {{points}}, average: {{votingAverage}}
        {{/with}}
      </li>
    {{/each}}
  </ul>
</template>

## test-non-reactive-sort-1.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 items
  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 code 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);

    }
  });

  Template.nonReactiveSort.helpers({
    'currentPage': function(){
      return Session.get('page') || 0
    },
    'items': function(){
      // while this helper is reactive because it is bound to `page`
      // the query results are not
      var page = Session.get('page') || 0;
      return collection.find({}, {
        sort: {votingAverage: -1},
        limit: ITEMS_PER_PAGE,
        skip: page * ITEMS_PER_PAGE,
        reactive: false});
    },
    'item': function(){
      // however, the data displayed for each row, comes from a reactive query
      return collection.findOne({_id: this._id})
    }

  });


}
	<head>
	<title>test-non-reactive-sort-1</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>
	{{! helper is reactive based on page, but results are not reactive}}
	{{#each items}}
	<li>
	{{! have a separate helper get the data for the item, that is reactive}}
	{{#with item}}
	{{name}} votes: {{votes}}, points: {{points}}, average: {{votingAverage}}
	{{/with}}
	</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 items
	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 code 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);

	}
	});

	Template.nonReactiveSort.helpers({
	'currentPage': function(){
	return Session.get('page') \|\| 0
	},
	'items': function(){
	// while this helper is reactive because it is bound to `page`
	// the query results are not
	var page = Session.get('page') \|\| 0;
	return collection.find({}, {
	sort: {votingAverage: -1},
	limit: ITEMS_PER_PAGE,
	skip: page * ITEMS_PER_PAGE,
	reactive: false});
	},
	'item': function(){
	// however, the data displayed for each row, comes from a reactive query
	return collection.findOne({_id: this._id})
	}

	});


	}