Knockout JS real time use and explanation

We will see one simple form and see how knockout js usage.

Final Result:

You can use local knockout js we have used online cdn to demonstrate.

First let’s create normal form on which we are expert. 🙂 Copy, Paste is best thing. 😉

<form>
	<div class="form-field">
		<label> First Name </label>
		<input type="text" name="first_name" />
	</div>
	<div class="form-field">
		<label> Last Name </label>
		<input type="text" name="last_name" />
	</div>
	<div class="form-field">
		<label> Email id </label>
		<input type="email" name="email_id" />
	</div>
	<div class="form-field">
		<label> Select your number of preference </label>
		<label for="phone">Phone</label>
		<input type="checkbox" id="phone" name="number_prefrence[]" />
		<label for="mobile">Mobile</label>
		<input type="checkbox" id="mobile" name="number_prefrence[]" />
	</div>
	<div class="form-field">
		<label>Enter Phone number</label>
		<input type="text" name="phone" />
	</div>
	<div class="form-field">
		<label>Enter Mobile number</label>
		<input type="text" name="mobile" />
	</div>
	<div class="form-field">
		<button type="button">Submit</button>
	</div>
</form>

<form>

<label> First Name </label>

</div>

</div>

<label> Email id </label>

</div>

<label> Select your number of preference </label>

<label for="phone">Phone</label>

<label for="mobile">Mobile</label>

</div>

<label>Enter Phone number</label>

</div>

<label>Enter Mobile number</label>

</div>

<button type="button">Submit</button>

</div>

</form>

We have our form code so now create knockout java-script.

First create javascript knockout viewModel on which we will apply binding.

<script type="text/javascript">
	function personData() {
		// our code lies here
	}
	// We will apply binding using ko function applyBindings
	ko.applyBindings(new personData());
</script>

function personData() {

// our code lies here

}

// We will apply binding using ko function applyBindings

ko.applyBindings(new personData());

</script>

Now we have basic things ready but how to use in HTML. Answer is using data-bind syntax of knockout. See below code where we have used data-bind and scope. scope define what data viewModel, it takes.

<form data-bind="scope: personData">

1	<form data-bind="scope: personData">

We have knockout viewModel and bind of HTML than let take first name input.

<input type="text" name="first_name" data-bind="value: firstname" />

1	<input type="text" name="first_name" data-bind="value: firstname" />

Now if you apply above code and save , it should give error in console that firstname is not defined. Because we have not defined firstname in viewModel which we had applied, in this personData. So let’s create it using ko.observable syntax.
this.firstname = ”; is normal javascript variable and this.firstname = ko.observable(); is knockout variable.

this.firstname = ko.observable('');

1	this.firstname = ko.observable('');

this refer to current object or function same as javascript variable scopes.

If we write, this.firstname = ko.observable(‘Coffee’); , it will populate default value of firstname Coffee. That’s how can apply pre-defined value.

this.firstname = ko.observable('');
this.lastname = ko.observable('');
this.fullname = ko.observable('');
this.email = ko.observable('');
this.phoneview = ko.observable(false);
this.mobileview = ko.observable(false);
this.phonenumber = ko.observable('');
this.mobilenumber = ko.observable('');

this.firstname = ko.observable('');

this.lastname = ko.observable('');

this.fullname = ko.observable('');

this.email = ko.observable('');

this.phoneview = ko.observable(false);

this.mobileview = ko.observable(false);

this.phonenumber = ko.observable('');

this.mobilenumber = ko.observable('');

We have defined firstname, lastname, fullname, email, phoneview, mobileview, phonenumber, mobilenumber as knockout observable variables.

Second we will create preview feature where we can see what we have entered in the form.

Take simple div structure.

<div class="visual-form">
	<table>
		<tbody>
			<tr>
				<td>Your name:</td>
				<td><span></span></td>
			</tr>
			<tr>
				<td>Your Email:</td>
				<td><span></span></td>
			</tr>
			<tr>
				<td>Phone number?</td>
				<td><span></span></td>
			</tr>
			<tr>
				<td>Your phone number:</td>
				<td><span></span></td>
			</tr>
			<tr>
				<td>Mobile number?</td>
				<td><span></span></td>
			</tr>
			<tr>
				<td>Your mobile number:</td>
				<td><span></span></td>
			</tr>
		</tbody>
	</table>
</div>

<table>

<tbody>

<tr>

</tr>

<tr>

<td>Your Email:</td>

</tr>

<tr>

<td>Phone number?</td>

</tr>

<tr>

<td>Your phone number:</td>

</tr>

<tr>

<td>Mobile number?</td>

</tr>

<tr>

<td>Your mobile number:</td>

</tr>

</tbody>

</table>

</div>

Now same form binding, we use same viewModel personData and bind this with div so we can use it’s properties.

<div class="visual-form" data-bind="scope: personData">

1	<div class="visual-form" data-bind="scope: personData">

Use data-bind : scope and viewModel name which is personData in our case.

Now we have bind the viewModel so let’s first see email id binding.

<td><span data-bind="text: email"></span></td>

1	<td><span data-bind="text: email"></span></td>

We have simply used text binding and assigned knockout variable email to it. Thus whatever value email id input field contains it shows immediately here without any jquery of .append or .innetHtml. Cool! 😉

Next thing, we would like to show first name and last name together as full name.
For that we will use Computed Observables and declare one computed knockout variable and use that in preview form feature.

this.fullname = ko.computed(function() {
    return this.firstname() + " " + this.lastname();
}, this);

this.fullname = ko.computed(function() {

return this.firstname() + " " + this.lastname();

}, this);

This computed observable process the function operation and return result of that operation. We have taken firstname , lastname and concat both value and return as result.
We have store that return value to fullname variable.

<td><span data-bind="text: fullname"></span></td>

1	<td><span data-bind="text: fullname"></span></td>

In Preview, we can see

<span data-bind="text: (phoneview() == true) ? 'Yes' : 'No' "></span>

1	<span data-bind="text: (phoneview() == true) ? 'Yes' : 'No' "></span>

Explanation of code is that, if phoneview knockout observable is true we show Yes else No.

Same way mobileview knockout observable works.

Final code : which can be copied and paste to see result. 😉

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Fill your details</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
	<style type="text/css">
		.visual-form{
		    width: 50%;
		    display: block;
		    float: left;
		    left: 0;
		    right: 0;
		}
		.form-field { margin: 10px; }
	</style>
</head>
<body>
	<div class="visual-form">
		<form data-bind="scope: personData">
			<div class="form-field">
				<label> First Name </label>
				<input type="text" name="first_name" data-bind="value: firstname" />
			</div>
			<div class="form-field">
				<label> Last Name </label>
				<input type="text" name="last_name" data-bind="value: lastname" />
			</div>
			<div class="form-field">
				<label> Email id </label>
				<input type="email" name="email_id" data-bind="value: email" />
			</div>
			<div class="form-field">
				<label> Select your number of preference </label>
				<label for="phone">Phone</label>
				<input type="checkbox" id="phone" name="number_prefrence[]" data-bind="checked: phoneview" />
				<label for="mobile">Mobile</label>
				<input type="checkbox" id="mobile" name="number_prefrence[]" data-bind="checked: mobileview" />
			</div>
			<div class="form-field" data-bind="visible: phoneview">
				<label>Enter Phone number</label>
				<input type="text" name="phone" data-bind="value: phonenumber, class: phoneview() ? 'required' : '' " />
			</div>
			<div class="form-field" data-bind="visible: mobileview">
				<label>Enter Mobile number</label>
				<input type="text" name="mobile" data-bind="value: mobilenumber, class: mobileview() ? 'required' : '' " />
			</div>
			<div class="form-field">
				<button type="button" data-bind="click: validateForm">Submit</button>
			</div>
		</form>
	</div>
	<div class="visual-form" data-bind="scope: personData">
		<table>
			<tbody>
				<tr>
					<td>Your name:</td>
					<td><span data-bind="text: fullname"></span></td>
				</tr>
				<tr>
					<td>Your Email:</td>
					<td><span data-bind="text: email"></span></td>
				</tr>
				<tr>
					<td>Phone number?</td>
					<td><span data-bind="text: (phoneview() == true) ? 'Yes' : 'No' "></span></td>
				</tr>
				<tr>
					<td>Your phone number:</td>
					<td><span data-bind="text: (phoneview() == true) ? phonenumber : '--' "></span></td>
				</tr>
				<tr>
					<td>Mobile number?</td>
					<td><span data-bind="text: (mobileview() == true) ? 'Yes' : 'No' "></span></td>
				</tr>
				<tr>
					<td>Your mobile number:</td>
					<td><span data-bind="text: (mobileview() == true) ? mobilenumber : '--' "></span></td>
				</tr>
			</tbody>
		</table>
	</div>

	<script type="text/javascript">

		function personData() {
			var self = this;
			this.firstname = ko.observable('');
			this.lastname = ko.observable('');
			this.fullname = ko.observable('');
			this.email = ko.observable('');
			this.phoneview = ko.observable(false);
			this.mobileview = ko.observable(false);
			this.phonenumber = ko.observable('');
			this.mobilenumber = ko.observable('');

			this.fullname = ko.computed(function() {
		        return this.firstname() + " " + this.lastname();
		    }, this);

			this.validateForm = function() {
				// we will use basic javascript validation
				if (self.firstname().trim() == '') {
					alert("Please enter firstname");
				}
				if (self.lastname().trim() == '') {
					alert("Please enter lastname");
				}
				var validEmailRegex = "/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/";
				if (!self.email().trim().match(validEmailRegex)) {
					alert("Email id is invalid");
				}
				// other valiation can add as per need

				// you code to pass data to server
				// for ajax based form submission
				// do put all your code inside ajax response
				/**
					this.firstname('');
					this.lastname('');
					this.email('');
					this.phoneview('');
					this.mobileview(false);
					this.phoneview(false);
					this.phonenumber('');
					this.mobilenumber('');
				**/
				// for non ajax based form submission

				/** location.reload(); */
				return true;
			}
	    }

		ko.applyBindings(new personData());
	</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<!DOCTYPE html>

<html>

<head>

<title>Fill your details</title>

.visual-form{

width: 50%;

display: block;

float: left;

left: 0;

right: 0;

}

.form-field { margin: 10px; }

</style>

</head>

<body>

<label> First Name </label>

</div>

</div>

<label> Email id </label>

</div>

<label> Select your number of preference </label>

<label for="phone">Phone</label>

<label for="mobile">Mobile</label>

</div>

<label>Enter Phone number</label>

</div>

<label>Enter Mobile number</label>

</div>

<button type="button" data-bind="click: validateForm">Submit</button>

</div>

</form>

</div>

<table>

<tbody>

<tr>

</tr>

<tr>

<td>Your Email:</td>

</tr>

<tr>

<td>Phone number?</td>

</tr>

<tr>

<td>Your phone number:</td>

</tr>

<tr>

<td>Mobile number?</td>

</tr>

<tr>

<td>Your mobile number:</td>

</tr>

</tbody>

</table>

</div>

function personData() {

var self = this;

this.firstname = ko.observable('');

this.lastname = ko.observable('');

this.fullname = ko.observable('');

this.email = ko.observable('');

this.phoneview = ko.observable(false);

this.mobileview = ko.observable(false);

this.phonenumber = ko.observable('');

this.mobilenumber = ko.observable('');

this.fullname = ko.computed(function() {

return this.firstname() + " " + this.lastname();

}, this);

this.validateForm = function() {

// we will use basic javascript validation

if (self.firstname().trim() == '') {

alert("Please enter firstname");

}

if (self.lastname().trim() == '') {

alert("Please enter lastname");

}

var validEmailRegex = "/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/";

if (!self.email().trim().match(validEmailRegex)) {

alert("Email id is invalid");

}

// other valiation can add as per need

// you code to pass data to server

// for ajax based form submission

// do put all your code inside ajax response

/**

this.firstname('');

this.lastname('');

this.email('');

this.phoneview('');

this.mobileview(false);

this.phoneview(false);

this.phonenumber('');

this.mobilenumber('');

**/

// for non ajax based form submission

/** location.reload(); */

return true;

}

ko.applyBindings(new personData());

</script>

</body>

</html>

Hope you understand things available in this post.
If like efforts, Please share, comment and subscribe for future posts and inspire more.

Leave a Reply Cancel reply