Knockoutjs simple quantity input component

Developer
Pavel Belousov
Size
3,041 Kb
Views
24,288
  1. Knockoutjs simple quantity input component Previews
  2. Knockoutjs simple quantity input component HTML Codes
  3. Knockoutjs simple quantity input component CSS Codes
  4. Knockoutjs simple quantity input component JS Codes

How do I make an knockoutjs simple quantity input component?

What is a knockoutjs simple quantity input component? How do you make a knockoutjs simple quantity input component? This script and codes were developed by Pavel Belousov on 26 August 2022, Friday.

Knockoutjs simple quantity input component Previews
IQ Test

Knockoutjs simple quantity input component - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Knockoutjs simple quantity input component</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- ko foreach: items -->	<div class="item">	<p data-bind="text: title"></p>	<!-- ko component: {	name: 'quantity-input',	params: {	quantity: quantity	}	} --><!--/ko -->	</div>
<!-- /ko --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Knockoutjs simple quantity input component - Script Codes CSS Codes

.item { border: solid 1px #ccc; padding: 5px; margin: 5px;
}
.item p { margin-top: 0;
}
.quantity-input button,
.quantity-input input { width: 40px; height: 30px; margin: 0; padding: 0; text-align: center;
}
.quantity-input input { width: 60px;
}

Knockoutjs simple quantity input component - Script Codes JS Codes

var items = [	{	id: 0,	title: "voluptate ex",	quantity: 8	},	{	id: 1,	title: "magna pariatur",	quantity: 7	},	{	id: 2,	title: "do duis",	quantity: 9	},	{	id: 3,	title: "id et",	quantity: 6	},	{	id: 4,	title: "do labore",	quantity: 3	},	{	id: 5,	title: "nulla excepteur",	quantity: 4	},	{	id: 6,	title: "sint esse",	quantity: 3	},	{	id: 7,	title: "cillum ex",	quantity: 4	},	{	id: 8,	title: "laborum excepteur",	quantity: 9	},	{	id: 9,	title: "nulla officia",	quantity: 3	}
];
var defaultInputParams = {	inputParams: {	min: 1,	max: 30,	step: 1	},	quamtity: 1
};
function quantityInputViewModel(params) {	var self = this;	// Extend params (deep)	$.extend(true, self, defaultInputParams, params);	// Make quantity as observable	// Решение проблемы с некорректным рендерингом: .extend({ notify: "always" })	self.quantity = ko.observable(self.quantity).extend({ notify: "always" });	self.getQuantity = ko	.pureComputed({	read: function() {	return self.quantity();	},	write: function(quantity) {	quantity = +quantity;	if (quantity >= self.inputParams.max) {	quantity = self.inputParams.max;	}	if (quantity <= self.inputParams.min) {	quantity = self.inputParams.min;	}	self.quantity(quantity);	}	})	// Решение проблемы с некорректным рендерингом: .extend({ notify: "always" })	.extend({ notify: "always" });	self.loading = ko.observable(self.loading);	// Disable "minus" button	self.disableMinus = ko.computed(function() {	return +self.quantity() <= self.inputParams.min || self.loading();	});	// Disable "plus" button	self.disablePlus = ko.computed(function() {	return +self.quantity() >= self.inputParams.max || self.loading();	});	self.setQuantity = function(val) {	var newVal = +val;	if (newVal >= self.inputParams.min || newVal <= self.inputParams.max) {	self.quantity(val);	} else if (newVal < self.inputParams.min) {	self.quantity(self.inputParams.min);	} else {	self.quantity(self.inputParams.max);	}	};	self.decrease = function() {	var oldVal = +self.quantity();	self.setQuantity(oldVal - self.inputParams.step);	};	self.increase = function() {	var oldVal = +self.quantity();	self.setQuantity(oldVal + self.inputParams.step);	};
}
//////////////////////////////////
function itemsViewModel() {	items: items;
}
ko.components.register("quantity-input", {	viewModel: quantityInputViewModel,	template: '<div class="quantity-input">\ <button type="button"\ data-bind="click: decrease, disable: disableMinus"\ >\ -\ </button>\ <input type="number"\ data-bind="textInput: getQuantity, attr: {min: inputParams.min, max: inputParams.max, step: inputParams.step}"\ >\ <button type="button"\ data-bind="click: increase, disable: disablePlus"\ >\ +\ </button>\ </div>'
});
ko.applyBindings(new itemsViewModel());
Knockoutjs simple quantity input component - Script Codes
Knockoutjs simple quantity input component - Script Codes
Home Page Home
Developer Pavel Belousov
Username pafnuty
Uploaded August 26, 2022
Rating 3
Size 3,041 Kb
Views 24,288
Do you need developer help for Knockoutjs simple quantity input component?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pavel Belousov (pafnuty) Script Codes
Name
TabsToSelect
FormStyler 1.7.4 select dropdown height bug
Pseudolinks
Multiple jCarousel
SVG tooths
A Pen by Pavel Belousov
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!