Edit in JSFiddle

var ViewModel = function() {
	var self = this;

	self.viewToRender = ko.observable(1);
	self.isActiveViewOne = ko.computed(function() {
		return (1 === self.viewToRender());
	});
	self.isActiveViewTwo = ko.computed(function() {
		return (2 === self.viewToRender());
	});
	self.showViewOne = function() {
		self.viewToRender(1);
	};
	self.showViewTwo = function() {
		self.viewToRender(2);
	};

	self.items = ko.observableArray();
  self.loadSomeItems = function() {
    var itemsCount = self.items.length;
    var itemsToAdd = itemsCount + 500;
    for (var it = itemsCount; it < itemsToAdd; it++) {
      self.items.push(it);
    }
  };
}

var myViewModel = new ViewModel();
ko.applyBindings(myViewModel);

<div>
	<a data-bind="click: showViewOne, css: {active: isActiveViewOne}" href="#">View 1</a>
	<a data-bind="click: showViewTwo, css: {active: isActiveViewTwo}" href="#">View 2</a>
</div>
<button data-bind="click: loadSomeItems">add 500 items</button>
<div data-bind="visible: isActiveViewOne()">
	Content View One
    <table>
        <thead>
            <tr>
                <td>Index</td>
                <td>Item</td>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td data-bind="text: $index()"></td>
                <td data-bind="text: $data"></td>
            </tr>
        </tbody>
    </table>
</div>
<div data-bind="visible: isActiveViewTwo()">
  <p>Content View Two</p>
	<p>Blah Blah Blah Blah Blah ...</p>
</div>

.active {
  font-weight: bold;
  font-size: 150%
}

table, tr, th, td {
    border: solid 1px #000;
}