p-baleine/hoge.js

## hoge.js
$(function() {
  // 最初からページに全部在る場合

  var limit = 3
    , start = 0
    , end = limit;

  // 初期表示
  $('.item').slice(start, end).show();
  $('.item').slice(end).hide();
  start += limit;
  end += limit;

  $('#more').click(function(e) {
    e.preventDefault();

    $('.item').slice(start, end).show();
    start += limit;
    end += limit;

    if ($('.item:not(:visible)').length == 0) {
      $('#more').hide();
    }
  });

});

$(function() {
  // サーバ疎通する場合

  var data = [
    { firstname: 'hoge0', lastname: 'hoge0', gender: 'male' },
    { firstname: 'piyo0', lastname: 'piyo0', gender: 'male' },
    { firstname: 'foo0', lastname: 'foo0', gender: 'male' },
    { firstname: 'hoge1', lastname: 'hoge1', gender: 'male' },
    { firstname: 'piyo1', lastname: 'piyo1', gender: 'male' },
    { firstname: 'foo1', lastname: 'foo1', gender: 'male' },
    { firstname: 'hoge2', lastname: 'hoge2', gender: 'male' },
    { firstname: 'piyo2', lastname: 'piyo2', gender: 'male' },
    { firstname: 'foo2', lastname: 'foo2', gender: 'male' }
  ];

  var ItemView = Backbone.View.extend({
    render: function() {
      this.setElement(this.template(this.model.toJSON()));
      return this;
    },

    template: Handlebars.compile($('#item_template').html())
  });

  var ItemCollection = Backbone.Collection.extend({
    // 実際にはサーバ疎通
    sliceFetch: function(offset, limit) {
      var newModels = _.map(data.slice(offset, offset + limit), function(elt) {
        return new Backbone.Model(elt);
      });

      this.models.concat(newModels);

      this.trigger('slice-reset', newModels);
    },

    size: function() {
      return data.length;
    }
  });

  var AppView = Backbone.View.extend({
    events: {
      'click #more2': 'fetchPartial'
    },

    initialize: function() {
      this.offset = 0;
      this.limit = 3;
      this.container = this.$('#question_form_body2');
      this.more = this.$('#more2');
      this.collection = new ItemCollection();
      this.collection.on('slice-reset', this.renderPartial, this);
      this.fetchPartial();
    },

    fetchPartial: function(e) {
      e && e.preventDefault();

      this.collection.sliceFetch(this.offset, this.limit);
      this.offset += this.limit;

      if (this.offset >= this.collection.size()) this.more.hide();
    },

    renderPartial: function(models) {
      _.each(models, function(model) {
        var itemView = new ItemView({ model: model });
        this.container.append(itemView.render().el);
      }.bind(this));
    }
  });

  var appView = new AppView({ el: '#container' });
});

## index.html
<html>
<head>
  <meta charset="utf-8">
</head>
<body>


  <table id="question_form" class="item_list" border="1">
	<tbody id="question_form_body">
      <tr class="item">
        <td class="firstname">hoge</td>
        <td class="lastname">hoge</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">piyo</td>
        <td class="lastname">piyo</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">foo</td>
        <td class="lastname">bar</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">hoge1</td>
        <td class="lastname">hoge1</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">piyo1</td>
        <td class="lastname">piyo1</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">foo1</td>
        <td class="lastname">bar1</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">hoge2</td>
        <td class="lastname">hoge2</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">piyo2</td>
        <td class="lastname">piyo2</td>
        <td class="gender">male</td>
      </tr>
      <tr class="item">
        <td class="firstname">foo2</td>
        <td class="lastname">bar2</td>
        <td class="gender">male</td>
      </tr>
    </tbody>
  </table>

  <a href="#" id="more">もっと見る</a>

  <div id="container">
    <table id="question_form2" class="item_list" border="1">
	  <tbody id="question_form_body2">
      </tbody>
    </table>

    <a href="#" id="more2">もっと見る</a>
  </div>

  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="handlebars.js"></script>
  <script type="text/javascript" src="underscore-min.js"></script>
  <script type="text/javascript" src="backbone-min.js"></script>
  <script type="text/javascript" src="hoge.js"></script>

  <script id="item_template" type="text/x-handlebars-template">
    <tr class="item">
      <td class="firstname">{{firstname}}</td>
      <td class="lastname">{{lastname}}</td>
      <td class="gender">{{gender}}</td>
    </tr>
  </script>

</body>

</html>
	$(function() {
	// 最初からページに全部在る場合

	var limit = 3
	, start = 0
	, end = limit;

	// 初期表示
	$('.item').slice(start, end).show();
	$('.item').slice(end).hide();
	start += limit;
	end += limit;

	$('#more').click(function(e) {
	e.preventDefault();

	$('.item').slice(start, end).show();
	start += limit;
	end += limit;

	if ($('.item:not(:visible)').length == 0) {
	$('#more').hide();
	}
	});

	});

	$(function() {
	// サーバ疎通する場合

	var data = [
	{ firstname: 'hoge0', lastname: 'hoge0', gender: 'male' },
	{ firstname: 'piyo0', lastname: 'piyo0', gender: 'male' },
	{ firstname: 'foo0', lastname: 'foo0', gender: 'male' },
	{ firstname: 'hoge1', lastname: 'hoge1', gender: 'male' },
	{ firstname: 'piyo1', lastname: 'piyo1', gender: 'male' },
	{ firstname: 'foo1', lastname: 'foo1', gender: 'male' },
	{ firstname: 'hoge2', lastname: 'hoge2', gender: 'male' },
	{ firstname: 'piyo2', lastname: 'piyo2', gender: 'male' },
	{ firstname: 'foo2', lastname: 'foo2', gender: 'male' }
	];

	var ItemView = Backbone.View.extend({
	render: function() {
	this.setElement(this.template(this.model.toJSON()));
	return this;
	},

	template: Handlebars.compile($('#item_template').html())
	});

	var ItemCollection = Backbone.Collection.extend({
	// 実際にはサーバ疎通
	sliceFetch: function(offset, limit) {
	var newModels = _.map(data.slice(offset, offset + limit), function(elt) {
	return new Backbone.Model(elt);
	});

	this.models.concat(newModels);

	this.trigger('slice-reset', newModels);
	},

	size: function() {
	return data.length;
	}
	});

	var AppView = Backbone.View.extend({
	events: {
	'click #more2': 'fetchPartial'
	},

	initialize: function() {
	this.offset = 0;
	this.limit = 3;
	this.container = this.$('#question_form_body2');
	this.more = this.$('#more2');
	this.collection = new ItemCollection();
	this.collection.on('slice-reset', this.renderPartial, this);
	this.fetchPartial();
	},

	fetchPartial: function(e) {
	e && e.preventDefault();

	this.collection.sliceFetch(this.offset, this.limit);
	this.offset += this.limit;

	if (this.offset >= this.collection.size()) this.more.hide();
	},

	renderPartial: function(models) {
	_.each(models, function(model) {
	var itemView = new ItemView({ model: model });
	this.container.append(itemView.render().el);
	}.bind(this));
	}
	});

	var appView = new AppView({ el: '#container' });
	});
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>


	<table id="question_form" class="item_list" border="1">
	<tbody id="question_form_body">
	<tr class="item">
	<td class="firstname">hoge</td>
	<td class="lastname">hoge</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">piyo</td>
	<td class="lastname">piyo</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">foo</td>
	<td class="lastname">bar</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">hoge1</td>
	<td class="lastname">hoge1</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">piyo1</td>
	<td class="lastname">piyo1</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">foo1</td>
	<td class="lastname">bar1</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">hoge2</td>
	<td class="lastname">hoge2</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">piyo2</td>
	<td class="lastname">piyo2</td>
	<td class="gender">male</td>
	</tr>
	<tr class="item">
	<td class="firstname">foo2</td>
	<td class="lastname">bar2</td>
	<td class="gender">male</td>
	</tr>
	</tbody>
	</table>

	<a href="#" id="more">もっと見る</a>

	<div id="container">
	<table id="question_form2" class="item_list" border="1">
	<tbody id="question_form_body2">
	</tbody>
	</table>

	<a href="#" id="more2">もっと見る</a>
	</div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="handlebars.js"></script>
	<script type="text/javascript" src="underscore-min.js"></script>
	<script type="text/javascript" src="backbone-min.js"></script>
	<script type="text/javascript" src="hoge.js"></script>

	<script id="item_template" type="text/x-handlebars-template">
	<tr class="item">
	<td class="firstname">{{firstname}}</td>
	<td class="lastname">{{lastname}}</td>
	<td class="gender">{{gender}}</td>
	</tr>
	</script>

	</body>

	</html>