Tile Component

Tile Component

by VipulS

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<link rel="stylesheet" href="https://heliosapp-test.azurewebsites.net/Content/style.css">
<div class="row">
  <div class="col-md-12">
    <div class="row">
    <!--ko foreach : tileList-->
    <div class="col-sm-4">
    <tile params="title:title,description:description"></tile>
    </div>
    <!--/ko-->
    </div>
  </div>
</div>

JavaScript

ko.components.register('tile', {
    viewModel: function(params){
    this.title=ko.observable(params.title);
    this.description=ko.observable(params.description)
    },
    template: `<div class="ibox float-e-margins animated fadeInRight">
          <div class="ibox-content">
            <h2 data-bind="text:title">Title</h2>
            <div data-bind="text:description">Description</div>
          </div>
        </div>`
        });
        
        
        
var TileContainerViewModel=function(){
this.tileList=ko.observableArray([
{title:"Tile 1",description:"Tile 1 Description"},
{title:"Tile 2",description:"Tile 2 Description"},
{title:"Tile 3",description:"Tile 3 Description"}
])
}

ko.applyBindings(new TileContainerViewModel());