ko-components-test

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
    <header>
        <div class="container">
            <div class="line-behind-text">
                <h1><a href="#">Component test</a></h1>
            </div>
        </div>
    </header>
    
    <div class="container">
        <div class="row">
            <div id="menu">
                <div class="col-md-12" data-bind="with: Menu, visible: activeView() === 'menu'">
                    <h3 data-bind="text: comment"></h3>
                    
                    <a href="#/item-1" class="grid-item">
                        <h1>Item 1</h1>
                        <p>This is item 1</p>
                    </a>
                    
                  
                    <a href="#/item-2" class="grid-item">
                        <h1>Item 2</h1>
                        <p>This is item 2</p>
                    </a>
                    
                     
                </div>
                
                  <item-1 data-bind="visible: activeView() === 'item-1'" ></item-1>
                  <item-2 data-bind="visible: activeView() === 'item-2'" ></item-2>                   
            </div>
            
   
        </div>
        
        
    </div>
    
             <script id="item-1">
                <div class="col-md-12" >
                    <h1>Item 1</h1>
                    <input data-bind="value: comment" />
                    <h3 data-bind="text: comment"></h3>
                    
                    <a href="#">menu</a>
                </div>
            </script>
            
            <script id="item-2">
                <div class="col-md-12">
                    <h1>Item 2</h1>
 ...

CSS

html {
  overflow-y: scroll; }

body {
  background-color: #fafafa;
  font-size: 16px; }

h6 {
  margin-bottom: 1.5em; }

h2 {
  border-bottom: 1px solid #fff; }

a {
  cursor: pointer; }

header {
  background-color: #1c9ccd;
  border-bottom: 2px solid #000;
  margin-bottom: 1em;
  padding-bottom: 4.5em; }

header.warning {
  background-color: #f0ad4e; }

.line-behind-text {
  border-bottom: 1px solid #fafafa;
  text-align: center; }

.line-behind-text h1 {
  background: #1c9ccd;
  color: #fafafa;
  display: inline-block;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 4em;
  font-weight: bold;
  padding: 0 10px;
  position: relative;
  top: 40px; }

.line-behind-text a {
  color: #fafafa;
  text-decoration: none; }

.grid-item {
  border-top: 0;
  border-bottom: 9px solid #fafafa;
  border-left: 4.5px solid #fafafa;
  border-right: 4.5px solid #fafafa;
  box-shadow: inset 0px 0px 1px 2px #536a8b;
  cursor: pointer;
  float: left;
  height: 14em;
  overflow: hidden;
  padding: 2em;
  text-align: center;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 33.33333%; }
  @media (max-width: 992px) {
  .grid-item {
    width: 100%; } }

.grid-item-big {
  width: 66.66667%; }
  @media (max-width: 992px) {
  .grid-item-big {
    width: 100%; } }

.grid-item-full {
  width: 100%; }

.grid-item:hover {
  text-decoration: none; }

.grid-item .fa {
  color: white; }

.grid-item h1 {
  color: white;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0.4em; }

.grid-item p {
  color: rgba(255, 255, 255, 0.7);
  margin: auto; }

.grid-item:nth-child(1) {
  background-color: #898989;
  box-shadow: inset 0px 0px 1px 2px #000; }
  .grid-item:nth-child(1):hover {
    background-color: #000;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover; }

.grid-item:nth-child(2) {
  background-color: #5fbebe;
  box-shadow: inset 0px 0px 1px 2px #000; }
 ...