Tile Component with templates

Tile Component with templates

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">
<template id="tplTileComponentView">
  <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>
</template>

<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

var TileComponentViewModel = function(params) {
  this.title = ko.observable(params.title);
  this.description = ko.observable(params.description)
};

ko.components.register('tile', {
  viewModel: TileComponentViewModel,
  template: {
    element: `tplTileComponentView`
  }
});



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());