Introduction
In my previous article you learned How to Dynamically Add New Data in the Observable Array and how to Make a Data Editable using Knockoutjs in ASP.NET Application.
In that article we dynamically added the data on the click of a button but what to do if you want the user to stop it when he clicks a specified number of times? For that we need a Click Counter and using that Click Counter the button will become disabled and the user will not be allowed to click anymore.
This article explains how to disable the click of a button using a Click Counter and using Knockoutjs.
Now I will show you the procedure to make such a wonderful thing.
Step 1
First we will work on the View Model.
<script>
function x(car, features) {
var self = this;
self.name = car;
self.feature = ko.observable(features);
}
function y() {
var self = this;
self.carModel = [
{ carName: "I20", price: 600000 },
{ carName: "Verna", price: 1200000 },
{ carName: "Duster", price: 800000 }
];
self.numberOfClicks = ko.observable(0);
self.hasClickedTooManyTimes = ko.computed(function () {
return self.numberOfClicks() >= 3;
}, self);
self.cars = ko.observableArray([
new x("Anubhav", self.carModel[1]),
new x("Mohit", self.carModel[0])
]);
self.addCar=function(){
self.cars.push(new x("Anubhav", self.carModel[1]));
self.numberOfClicks(this.numberOfClicks() + 1);
};
self.removeCar = function (cars) {
self.cars.remove(cars);
};
}
ko.applyBindings(new y());
</script>
In the function x() we create a class that will store the Buyer Name with the Car Selection made by him. Notice that the "feature" property is made observable .
After that a new function y() is created in which first the Car Name and it's prices are declared under the carModel and after that in "self.cars" the selection made by the buyer is shown along with his name, "self.cars" is an Observable Array, which means that it will show the results instantly in the UI.
After that a property is made named as "numberOfClicks", it's made Observable, which means it can be read or written whenever needed and it's initial value is set to "0". After that I created a function that will work when the number of clicks becomes equal to or greater than "3".
Now I had worked on the addCar function to be executed on the click of a button, the prupose of this function is to make a new entry in the Array and to increase the counter by one.
self.addCar=function(){
self.cars.push(new x("Anubhav", self.carModel[1]));
self.numberOfClicks(this.numberOfClicks() + 1);
};
At the end, one more function is created that will help to remove the raw data from the Array at run time.
Step 2
Our work on the ViewModel is now completed. Now we will work on the View of this application, in other words on the design part of our application.
<table>
<thead><tr>
<th>Buyer Name</th><th>Car Name</th><th>Price</th><th></th>
</tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.carModel, value: feature, optionsText: 'carName'"></select></td>
<td data-bind="text: feature().price"></td>
<td><a href="#" data-bind="click:$root.removeCar">Remove</a></td>
</tr>
</tbody>
</table>
<button data-bind="click: addCar, disable: hasClickedTooManyTimes">Add</button>
<div data-bind='visible: hasClickedTooManyTimes'>
You have buyed too many car's please stop otherwise you will be out of your Money$$$$.
</div>
In the first "<td>" tag I had made the data available in the TextBox that can be edited and in the second "<td>" tag I had made the data available in the Drop Down Menu, this is done using the "options" and "optionsText" options that help the data to appear in the DropDown Menu and optionText is used to represent the option property that is used to represent each item on the screen.
Now look at the fourth "<td>" tag. It consists of the hyperlink and when its clicked "$root.removeCar" is called. The "$root" prefix helps to find the removeCar function.
After that I had taken a Button in which addCar is bound, it's click will make a new entry in the Array and also it will get disabled when the click counter reaches the mark of "3".
Also I had taken a div that will become visible only when the Click Counter reaches it's maximum value.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<thead><tr>
<th>Buyer Name</th><th>Car Name</th><th>Price</th><th></th>
</tr></thead>
<tbody data-bind="foreach: cars">
<tr>
<td><input data-bind="value: name" /></td>
<td><select data-bind="options: $root.carModel, value: feature, optionsText: 'carName'"></select></td>
<td data-bind="text: feature().price"></td>
<td><a href="#" data-bind="click:$root.removeCar">Remove</a></td>
</tr>
</tbody>
</table>
<button data-bind="click: addCar, disable: hasClickedTooManyTimes">Add</button>
<div data-bind='visible: hasClickedTooManyTimes'>
You have buyed too many car's please stop otherwise you will be out of your Money$$$$.
</div>
The complete code of our application is as follows:
<script>
function x(car, features) {
var self = this;
self.name = car;
self.feature = ko.observable(features);
}
function y() {
var self = this;
self.carModel = [
{ carName: "I20", price: 600000 },
{ carName: "Verna", price: 1200000 },
{ carName: "Duster", price: 800000 }
];
self.numberOfClicks = ko.observable(0);
self.hasClickedTooManyTimes = ko.computed(function () {
return self.numberOfClicks() >= 3;
}, self);
self.cars = ko.observableArray([
new x("Anubhav", self.carModel[1]),
new x("Mohit", self.carModel[0])
]);
self.addCar=function(){
self.cars.push(new x("Anubhav", self.carModel[1]));
self.numberOfClicks(this.numberOfClicks() + 1);
};
self.removeCar = function (cars) {
self.cars.remove(cars);
};
}
ko.applyBindings(new y());
</script>
</form>
</body>
Output
Now when you run the application you will get output like this:
![click counetr knockout1.jpg]()
But when you click on the Add Button again and again the button will be disable after getting clicked three times.
![click counetr knockout5.jpg]()