KnockoutJs

by andersb79

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<!-- ko if : hasFocus -->
<textarea class="size" data-bind="hasFocus:hasFocus,value:textArea"></textarea>
<!-- /ko -->
<!-- ko ifnot : hasFocus -->
<div class="size" data-bind="click:setFocus,text:result"></div>
<!-- /ko -->

<br/>
<!-- ko foreach : fields -->
<span data-bind="text:name"></span>
<!-- /ko -->
<span data-bind="text:hasFocus"></span>

CSS

.size{
  width:100px;
  height:100px;
  background-color:red;
}

JavaScript

function AppViewModel() {
    this.createField = function(name,id){
    	return {name : name, id : id };
    };
   this.textArea = ko.observable("start");
    
    this.fields = ko.observableArray();
    
    this.fields.push(this.createField('test','{{colTest}}'));
    this.fields.push(this.createField('test2','{{colTest2}}'));
    
    this.hasFocus = ko.observable();
     
    this.setFocus = function(){
    	this.hasFocus(true);
    }
    
   
    
    
    this.result = ko.computed(function(){
    	return this.textArea();
    });
}



// Activates knockout.js
ko.applyBindings(new AppViewModel());