JQuery&UI&Knockout Template

by gurkavcu

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<div style="height:20px"></div>

<form data-bind="divider : { size : 5, list: controls , templateName : 'unit' }" class="form-horizontal"></form>

<script id="unit" type="text/x-jquery-tmpl">
    <div class="control-group">
      <div data-bind="template: { name : 'controlTemplate', foreach : $data }"></div> 
    </div>
</script>

<script id="controlTemplate" type="text/x-jquery-tmpl">
  <label data-bind="text:label" class="control-label" />
  <div class="controls" data-bind="foreach : controls">
    <div data-bind="template : { name : 'comparatorTemplate' }" class="optionDiv"></div>
    <input data-bind="value:value" type="text" class="input-small"></input>
    <span  data-bind="text: ' Veya ' ,visible: $parent.showOr($data)">  </span>
    <img class="plus" src="https://www.orjinkrem.com/Resimler/orjinkrem_plus.png" data-bind="visible : $parent.showPlus($data), click :  $parent.add "/>
  </div>  
</script>

<script id="dividerTemplate" type="text/x-jquery-tmpl">
    <div class="dividerContainer"  data-bind="foreach : list ">
      <div class="divider" data-bind="template : { name : $parent.name }"></div>               
    </div>
</script>

<script  id="comparatorTemplate" type="text/x-jquery-tmpl">
  <select class="span2">
      <option value="equal">Eşittir</option>
      <option value="startswith">İle Başlayan</option>
      <option value="contains">İçinde Geçen</option>
      <option value="ge">Büyük Eşit</option>
      <option value="gt">Büyüktür</option>
      <option value="se">Küçük Eşit</option>
      <option...

CSS

.form-horizontal .control-group {
  margin-bottom: 5px;
}

.form-horizontal .control-label {
  /*width: 50px;*/
  /*font-size: 12 px;*/
}

.optionDiv {
  width: 30px;
  display : inline;  
}

.dividerContainer {
  width:auto;
  display : inline;
  resize:both;
  
}

.divider {
  border: 2px coral solid;
  float: left;  
}


.plus {
  width: 20px;
  height: 20px;

}

JavaScript

function l(log) {
 console.log(log); 
}

function ControlArray(label) {
  var self = this;
  this.label = ko.observable(label);
  this.controls = ko.observableArray([]);
  this.addControl = function(value) {
    self.controls.push(new Control(value));
  }
  this.showPlus = function(item) {
    return self.controls.indexOf(item) == (self.controls().length-1);
  }
  this.showOr = function(item) {

    return self.controls.indexOf(item) < (self.controls().length-1);
  }
  this.add = function(a,b,c) {   
    self.addControl('');
  }
}

function Control(value) { 
  var self = this; 
  this.value = ko.observable(value);

}

ko.bindingHandlers.divider = {
  
    init: function (element, valueAccessor, allBindingsAccessor, data, context) {
      
      var defaultOptions = { size : 5};
      var options = $.extend(true, defaultOptions, valueAccessor()); 
      
      var seperatedList = ko.observable([]);
      
      var length = options.list().length;
      var size = options.size;
      var templateName = options.templateName;
      
      if( length > 0 && templateName !== null && templateName !== '') {
        
        for(var i=0; i< (length/size); i++) {
        		seperatedList().push(options.list.slice(i*size, (i+1)*size) );
        }
        
        l(ko.toJSON(seperatedList));
        
        ko.applyBindingsToNode($(element).get(0),{template: { name: 'dividerTemplate' , data : { list: seperatedList , name : templateName}} });        
        
          return { controlsDescendantBindings: true };
      }
      
    }
};

function ViewModel() {
  
  var self = this;    
  this.controls = ko.observableArray();    
  for(var i=1;i<=10;i++) {
    var ca = new ControlArray('TEST'+i);
    ca.addControl('VALUE'+i);
  	this.controls.push(ca);
  }  
}  

$(document).ready(function(){
	
  var viewModel = new ViewModel();  
  ko.applyBindings(viewModel);
  
});