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 : 3, 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">
	      <!-- ko template: { name: $parent.template(), data: $data } --><!-- /ko --> 		    
            <img class="minus" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Status-user-busy-icon.png" data-bind="visible: $parent.showMinus($data), click : $parent.remove"/>
            <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="inputComparatorTemplate" type="text/x-jquery-tmpl">
		  <select class="span2" data-bind="value:comparatorValue">
		      <option value="equal">Eşit</option>
		      <option value="notequal">Eşit Değil</option>
		     ...

CSS

.form-horizontal .control-group {
	  		margin-bottom: 5px;
		}
  
    .form-horizontal .controls {  
    	margin-bottom: 5px;
    }
		.form-horizontal .control-label {
		  /*width: 50px;*/
		  /*font-size: 12 px;*/
		}

		.dividerContainer {		
		    background-color:#fafafa;		   		 		
		    white-space:nowrap;
            margin-top:10px;
		}

		.divider {
		  border: 2px coral solid;		 		  
		  display:inline-table;
  		  padding-top:10px;
		}

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

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

		.minus {
		  width: 18px;
		  height: 18px;
		}

 .pre {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  border-width: 0; margin: 0; padding: 0; background: transparent;
  font-family: inherit;
  font-size: inherit;
  padding: 0; margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
}

JavaScript

var viewModel ;

		var data = [ { "value" : 'AHMET', "name" : ''  },
             { "value" : 'ASLAN', "name" : ''  },
             { "value" : 'SAMET', "name" : ''  },
             { "value" : 'SADULLAH', "name" : '' },
             { "value" : 'SİNAN', "name" : ''  }
        ];

		ko.bindingHandlers.typeaheadAjax = {
		   init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
		       var options = valueAccessor();                
		       $(element).typeahead({
		                   source : function(query,process) {                              
		                           return options.url(query).done(function (data) {
                                       if(options.map && typeof options.map === "function")
                                          return process(options.map(data));
		                                   return process(data);
		                           });
		                   },
		                   updater : function(newValue) {
		                           options.value(newValue);
		                           return newValue;
		                   }
		           });
		   }
		};

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

		        ko.applyBindingsToNode($(element).get(0),
		        {template: { name: 'dividerTemplate' , data : { list: seperatedList , name : templateName}} });        
		        
		        return...