JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

//Syntaxen för knockout är data-bind=""
//Innanför "" kommer först vilket "attribut" du vill ändra. Exempelvis text på <p>, eller value på inputs
<h1 data-bind="text: fullName"></h1>

Förnamn: <input type="text" data-bind="value: firstName, valueUpdate:'afterkeydown'"> <br>
Efternamn: <input type="text" data-bind="value: lastName, valueUpdate:'afterkeydown'">

JavaScript

function ViewModel() {
	//En ko.observable() är en "lyssnare". this.firstName är din property för ViewModel.
  //Ändrar du på firstName så ändras det alltså överallt där vi hänvisar till firstName.
  this.firstName = ko.observable("");
  
  this.lastName = ko.observable("Efternamn");
  
  //ko.computed är samma sak förutom att du returnerar ett värde i en funktion, 
  // istället för att definiera från början, redan där uppe
  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);
}


// Här talar vi om för DOM:en att vår ViewModel är vår "data" som vi vill skriva ut i vyn.
window.onload = function(){

	ko.applyBindings(ViewModel());

}