ko.components.register('item-2', {
    viewModel: Item2,
    template: '<div class="col-md-12" data-bind="visible: $parent.activeView()==='item-2'"> <h1>Item 2</h1> <input data-bind="value: comment"/> <h3 data-bind="text: comment"></h3> </div>'
});

<div id="item-1">
    <div class="col-md-12" data-bind="with: Item1, visible: activeView() === 'item-1'">
        <h1>Item 1</h1>
        <input data-bind="value: comment" />
        <h3 data-bind="text: comment"></h3>
    </div>
</div>

<div id="item-2">
    <div class="col-md-12" data-bind="with: Item2, visible: activeView() === 'item-2'">
        <h1>Item 2</h1>
        <input data-bind="value: comment" />
        <h3 data-bind="text: comment"></h3>
    </div>
</div>

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

    console.log(self);

    self.title = ko.observable('Item 1');
    self.comment = ko.observable('comment: item 1');
}

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

    console.log(self);

    self.title = ko.observable('Item 2');
    self.comment = ko.observable('comment: item 2');
}

ko.components.register('menu', {
    viewModel: Menu,
    template: {element: 'menu'}
});

ko.components.register('item-1', {
    viewModel: Item1,
    template: {element: 'item-1'}
});

ko.components.register('item-2', {
    viewModel: Item2,
    template: {element: 'item-2'}
});

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

    self.activeView = ko.observable();

    Sammy(function() {
        this.get('/', function(context) {
            self.activeView('menu');
        });

        this.get('#/item-1', function(context) {
            self.activeView('item-1');
        });

        this.get('#/item-2', function(context) {
            self.activeView('item-2');
        });
    }).run();
};

ko.applyBindings(new VM());