01. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Includes nested dropdowns and a string formatting function</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width='100%'>
<thead>
<tr>
<th width='25%'>Category</th>
<th width='25%'>Product</th>
<th class='price' width='15%'>Price</th>
<th class='quantity' width='10%'>Quantity</th>
<th class='price' width='15%'>Subtotal</th>
<th width='10%'> </th>
</tr>
</thead>
<tbody data-bind='foreach: lines'>
<tr>
<td>
<select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'> </select>
</td>
<td data-bind="with: category">
<select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select>
</td>
<td class='price' data-bind='with: product'>
<span data-bind='text: formatCurrency(price)'> </span>
</td>
<td class='quantity'>
<input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' />
</td>
<td class='price'>
<span data-bind='visible: product, text: formatCurrency(subtotal())' > </span>
</td>
<td>
<a href='#' data-bind='click: $parent.removeLine'>Remove</a>
</td>
</tr>
</tbody>
</table>
<p class='grandTotal'>
Total value: <span data-bind='text: formatCurrency(grandTotal())'> </span>
</p>
<button data-bind='click: addLine'>Add product</button>
<button data-bind='click: save'>Submit order</button>
<script>
function formatCurrency(value) {
return "$" + value.toFixed(2);
}
var CartLine = function() {//chưa có data???
var self = this;
self.category = ko.observable();
self.product = ko.observable();
self.quantity = ko.observable(1);
self.subtotal = ko.pureComputed(function() {
return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
});
// Whenever the category changes, reset the product selection
self.category.subscribe(function() {
self.product(undefined);
});
};
var Cart = function() {
// Stores an array of lines, and from these, can work out the grandTotal
var self = this;
self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
self.grandTotal = ko.pureComputed(function() {
var total = 0;
$.each(self.lines(), function() { total += this.subtotal() })
return total;
});
// Operations
self.addLine = function() { self.lines.push(new CartLine()) };
self.removeLine = function(line) { self.lines.remove(line) };
self.save = function() {
var dataToSave = $.map(self.lines(), function(line) {
return line.product() ? {
productName: line.product().name,
quantity: line.quantity()
} : undefined
});
alert("Could now send this to server: " + JSON.stringify(dataToSave));
};
};
ko.applyBindings(new Cart());
</script>
</body>
</html>
02. sample.js
var sampleProductCategories = [
{
"products": [
{
"name": "1948 Porsche 356-A Roadster",
"price": 53.9
},
{
"name": "1948 Porsche Type 356 Roadster",
"price": 62.16
},
{
"name": "1949 Jaguar XK 120",
"price": 47.25
},
{
"name": "1952 Alpine Renault 1300",
"price": 98.58
},
{
"name": "1952 Citroen-15CV",
"price": 72.82
},
{
"name": "1956 Porsche 356A Coupe",
"price": 98.3
},
{
"name": "1957 Corvette Convertible",
"price": 69.93
},
{
"name": "1957 Ford Thunderbird",
"price": 34.21
},
{
"name": "1958 Chevy Corvette Limited Edition",
"price": 15.91
},
{
"name": "1961 Chevrolet Impala",
"price": 32.33
},
{
"name": "1962 LanciaA Delta 16V",
"price": 103.42
},
{
"name": "1965 Aston Martin DB5",
"price": 65.96
},
{
"name": "1966 Shelby Cobra 427 S/C",
"price": 29.18
},
{
"name": "1968 Dodge Charger",
"price": 75.16
},
{
"name": "1968 Ford Mustang",
"price": 95.34
},
{
"name": "1969 Chevrolet Camaro Z28",
"price": 50.51
},
{
"name": "1969 Corvair Monza",
"price": 89.14
},
{
"name": "1969 Dodge Charger",
"price": 58.73
},
{
"name": "1969 Dodge Super Bee",
"price": 49.05
},
{
"name": "1969 Ford Falcon",
"price": 83.05
},
{
"name": "1970 Chevy Chevelle SS 454",
"price": 49.24
},
{
"name": "1970 Dodge Coronet",
"price": 32.37
},
{
"name": "1970 Plymouth Hemi Cuda",
"price": 31.92
},
{
"name": "1970 Triumph Spitfire",
"price": 91.92
},
{
"name": "1971 Alpine Renault 1600s",
"price": 38.58
},
{
"name": "1972 Alfa Romeo GTA",
"price": 85.68
},
{
"name": "1976 Ford Gran Torino",
"price": 73.49
},
{
"name": "1982 Camaro Z28",
"price": 46.53
},
{
"name": "1982 Lamborghini Diablo",
"price": 16.24
},
{
"name": "1985 Toyota Supra",
"price": 57.01
},
{
"name": "1992 Ferrari 360 Spider red",
"price": 77.9
},
{
"name": "1992 Porsche Cayenne Turbo Silver",
"price": 69.78
},
{
"name": "1993 Mazda RX-7",
"price": 83.51
},
{
"name": "1995 Honda Civic",
"price": 93.89
},
{
"name": "1998 Chrysler Plymouth Prowler",
"price": 101.51
},
{
"name": "1999 Indy 500 Monte Carlo SS",
"price": 56.76
},
{
"name": "2001 Ferrari Enzo",
"price": 95.59
},
{
"name": "2002 Chevy Corvette",
"price": 62.11
}
],
"name": "Classic Cars"
},
{
"products": [
{
"name": "1936 Harley Davidson El Knucklehead",
"price": 24.23
},
{
"name": "1957 Vespa GS150",
"price": 32.95
},
{
"name": "1960 BSA Gold Star DBD34",
"price": 37.32
},
{
"name": "1969 Harley Davidson Ultimate Chopper",
"price": 48.81
},
{
"name": "1974 Ducati 350 Mk3 Desmo",
"price": 56.13
},
{
"name": "1982 Ducati 900 Monster",
"price": 47.1
},
{
"name": "1982 Ducati 996 R",
"price": 24.14
},
{
"name": "1996 Moto Guzzi 1100i",
"price": 68.99
},
{
"name": "1997 BMW F650 ST",
"price": 66.92
},
{
"name": "1997 BMW R 1100 S",
"price": 60.86
},
{
"name": "2002 Suzuki XREO",
"price": 66.27
},
{
"name": "2002 Yamaha YZR M1",
"price": 34.17
},
{
"name": "2003 Harley-Davidson Eagle Drag Bike",
"price": 91.02
}
],
"name": "Motorcycles"
},
{
"products": [
{
"name": "1900s Vintage Bi-Plane",
"price": 34.25
},
{
"name": "1900s Vintage Tri-Plane",
"price": 36.23
},
{
"name": "1928 British Royal Navy Airplane",
"price": 66.74
},
{
"name": "1980s Black Hawk Helicopter",
"price": 77.27
},
{
"name": "ATA: B757-300",
"price": 59.33
},
{
"name": "America West Airlines B757-200",
"price": 68.8
},
{
"name": "American Airlines: B767-300",
"price": 51.15
},
{
"name": "American Airlines: MD-11S",
"price": 36.27
},
{
"name": "Boeing X-32A JSF",
"price": 32.77
},
{
"name": "Corsair F4U ( Bird Cage)",
"price": 29.34
},
{
"name": "F/A 18 Hornet 1/72",
"price": 54.4
},
{
"name": "P-51-D Mustang",
"price": 49.0
}
],
"name": "Planes"
},
{
"products": [
{
"name": "18th century schooner",
"price": 82.34
},
{
"name": "1999 Yamaha Speed Boat",
"price": 51.61
},
{
"name": "HMS Bounty",
"price": 39.83
},
{
"name": "Pont Yacht",
"price": 33.3
},
{
"name": "The Mayflower",
"price": 43.3
},
{
"name": "The Queen Mary",
"price": 53.63
},
{
"name": "The Schooner Bluenose",
"price": 34.0
},
{
"name": "The Titanic",
"price": 51.09
},
{
"name": "The USS Constitution Ship",
"price": 33.97
}
],
"name": "Ships"
},
{
"products": [
{
"name": "1950's Chicago Surface Lines Streetcar",
"price": 26.72
},
{
"name": "1962 City of Detroit Streetcar",
"price": 37.49
},
{
"name": "Collectable Wooden Train",
"price": 67.56
}
],
"name": "Trains"
},
{
"products": [
{
"name": "1926 Ford Fire Engine",
"price": 24.92
},
{
"name": "1940 Ford Pickup Truck",
"price": 58.33
},
{
"name": "1940s Ford truck",
"price": 84.76
},
{
"name": "1954 Greyhound Scenicruiser",
"price": 25.98
},
{
"name": "1957 Chevy Pickup",
"price": 55.7
},
{
"name": "1958 Setra Bus",
"price": 77.9
},
{
"name": "1962 Volkswagen Microbus",
"price": 61.34
},
{
"name": "1964 Mercedes Tour Bus",
"price": 74.86
},
{
"name": "1980’s GM Manhattan Express",
"price": 53.93
},
{
"name": "1996 Peterbilt 379 Stake Bed with Outrigger",
"price": 33.61
},
{
"name": "Diamond T620 Semi-Skirted Tanker",
"price": 68.29
}
],
"name": "Trucks and Buses"
},
{
"products": [
{
"name": "18th Century Vintage Horse Carriage",
"price": 60.74
},
{
"name": "1903 Ford Model A",
"price": 68.3
},
{
"name": "1904 Buick Runabout",
"price": 52.66
},
{
"name": "1911 Ford Town Car",
"price": 33.3
},
{
"name": "1912 Ford Model T Delivery Wagon",
"price": 46.91
},
{
"name": "1913 Ford Model T Speedster",
"price": 60.78
},
{
"name": "1917 Grand Touring Sedan",
"price": 86.7
},
{
"name": "1917 Maxwell Touring Car",
"price": 57.54
},
{
"name": "1928 Ford Phaeton Deluxe",
"price": 33.02
},
{
"name": "1928 Mercedes-Benz SSK",
"price": 72.56
},
{
"name": "1930 Buick Marquette Phaeton",
"price": 27.06
},
{
"name": "1932 Alfa Romeo 8C2300 Spider Sport",
"price": 43.26
},
{
"name": "1932 Model A Ford J-Coupe",
"price": 58.48
},
{
"name": "1934 Ford V8 Coupe",
"price": 34.35
},
{
"name": "1936 Chrysler Airflow",
"price": 57.46
},
{
"name": "1936 Mercedes Benz 500k Roadster",
"price": 21.75
},
{
"name": "1936 Mercedes-Benz 500K Special Roadster",
"price": 24.26
},
{
"name": "1937 Horch 930V Limousine",
"price": 26.3
},
{
"name": "1937 Lincoln Berline",
"price": 60.62
},
{
"name": "1938 Cadillac V-16 Presidential Limousine",
"price": 20.61
},
{
"name": "1939 Cadillac Limousine",
"price": 23.14
},
{
"name": "1939 Chevrolet Deluxe Coupe",
"price": 22.57
},
{
"name": "1940 Ford Delivery Sedan",
"price": 48.64
},
{
"name": "1941 Chevrolet Special Deluxe Cabriolet",
"price": 64.58
}
],
"name": "Vintage Cars"
}
];
03. style.css
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }
.liveExample th { text-align: left; font-weight: bold; }
.liveExample .price { text-align: right; padding-right: 2em; }
.liveExample .grandTotal { border-top: 1px solid silver; padding-top: 0.5em; font-size: 1.2em; }
.liveExample .grandTotal SPAN { font-weight: bold; }
.liveExample table, .liveExample td, .liveExample th { padding: 0.2em; border-width: 0; margin: 0; vertical-align: top; }
.liveExample td input, .liveExample td select { width: 8em; }
.liveExample td.quantity input { width: 4em; }
.liveExample td select { height: 1.8em; white-space: nowrap; }
li { list-style-type: disc; margin-left: 20px; }
Thấy có ích cho mình 01 THÍCH:
https://www.facebook.com/lophocvitinhcom
Danh sách 12 bài demo chi tiết KnockoutJS (có bảo hành code)
(liên hệ riêng vs mình nhé)
- hello (form vs data-binding)
- click counter
- simple list
- better list
- page grid
- editable grid
- shopping cart
- control types
- contacts editor
- collections
- animated transitions
- model to form binding
Sưu tầm bởi #drM
Không có nhận xét nào:
Đăng nhận xét