ko-item

In this example below you will see how to do a ko-item with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by pramodpv, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pramodpv ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ko-item</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  

<div class='container'>
  <ko-items params="Data:$data.Items">
  </ko-items>  
</div>

<script type='text/html' id='tmpl-ko-items'>
	<div class='en-items'>items
  	<h2 data-bind='text:Data.Name'></h2>
    <div class='en-item-container' data-bind='template:{foreach:Data.Items}'>
    	<ko-item params="Data:$data">
  		</ko-item>
  	</div>
    <a href='#' data-bind='click:AddItem'>Add</a>
  </div>
</script>


<script type='text/html' id='tmpl-ko-item-container'>
	<div class='en-item' data-bind='css:Data.State'>
  	<input data-bind='value:Data.State'/>
    <div class='en-item-state' data-bind='template:{name:Template()}, css:Data.State'>
    </div>  	
  </div>
</script>



<script type='text/html' id='tmpl-ko-search'>
<div>
	<input type='text' data-bind='hasFocus:true,textInput:Term'/>
</div>
<div class='en-search-result'>

<table><tbody data-bind='template:{foreach:SearchResult}'><tr><td data-bind='text:Name'></td></tr></tbody>
  </table>
  </div>

</script>
<script type='text/html' id='tmpl-ko-item-product-selection'>
  	
    <h2>Select a product</h2>
  	<ko-search params=''>
    </ko-search>
  	
  
</script>

<script type='text/html' id='tmpl-ko-item-view'>
	view
  	<span data-bind='text:Data.State'></span>
    
  	<span data-bind='text:Data.ProductId'></span>
  	<span data-bind='value:Data.Quantity'></span>
    <span data-bind='value:Data.Rate'></span>
  	<span data-bind='text:Data.Amount'></span>
  
</script>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/pramodpv/ko-item-Kgjxdw */
.container{
  margin-top:10px;
}
.en-item-state.empty{
  height:400px;
  overflow-y:hidden;
}
.en-item-state{
  height:50px;
  transition: height 1s;
}
.en-search-result{
  height:400px;
  overflow-y:auto;
}
.en-item.empty
{
  margin:0 0 3px 0;
  background:#e4e3e3;
  box-shadow: 1px 1px 3px #b5b5b5;
}

.en-item{
  background:whitesmoke;
  margin:0;
  padding:5px;
      border-top: 1px solid #eee;
  /*border-radius:5px;*/
  box-shadow: 0 0 0px whitesmoke;
  transition: background 1s, box-shadow 1s, margin 1s;
}

/*Downloaded from https://www.codeseek.co/pramodpv/ko-item-Kgjxdw */
ko.components.register('ko-items', {
  viewModel:function(params){    
    var items = this;
    this.Data = params.Data;    
    this.AddItem = function(){
      items.Data.Items.push(new VwMdlItem() );
    };
  },
  template: {element:"tmpl-ko-items"}
});

ko.components.register('ko-search', {
  viewModel:function(params){    
    var search = this;
    this.Term = ko.observable('').extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } });;
    this.SearchResult = ko.observableArray();
    this.Search = function(){
      console.log('searching for '+search.Term());
      //search.SearchResult.removeAll();
      search.SearchResult.push({Name:search.Term()});
    };
    search.Term.subscribe(search.Search);
  },
  template: {element:"tmpl-ko-search"}
});



ko.components.register('ko-item', {
  viewModel:function(params){
    this.Data = params.Data;
    this.Template = ko.computed(function(){
      var state = params.Data.State();      
      if(state == 'empty')
        {          
          return "tmpl-ko-item-product-selection";
        }
          
        return "tmpl-ko-item-view";
    });
  },
  template: {element:"tmpl-ko-item-container"}
});

ko.components.register('ko-menu-item', {
  viewModel:function(params){
    console.log(params);
    this.Menu = params.menu;
    
  },
  template: {element:"tmpl-ko-menu-item"}
});


$(function() {
  console.clear();   
  var vmPage = new VwMdlPage();
  
  ko.applyBindings(vmPage);  
  
  
});


function VwMdlItem(options)
{
  var item = this;
  var settings = $.extend({
    state : itemState.empty
  },options);
  this.State = ko.observable(settings.state);
  this.ProductId = ko.observable(0);
  this.Quantity = ko.observable(0);
  this.Rate = ko.observable(0);
  this.Amount = ko.computed(function(){
    var rate = item.Rate();
    var qty = item.Quantity();
    return rate * qty;
  });
}
var itemState = {
  empty : 'empty'
};


function VwMdlItems(name)
{
  var items = this;
  this.Items = ko.observableArray();
  this.Name = ko.observable(name);
}

function VwMdlPage()
{
  this.Items = new VwMdlItems("Products");
  
  this.Items.Items.push(new VwMdlItem());
  this.Items.Items.push(new VwMdlItem());
  this.Items.Items.push(new VwMdlItem());
}

Comments