Jason/safaribook-knockout-essentials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chap1->Observables to refresh the UI automatically->Inserting elements in collections

Browse Source 
1. Learned with binding for context switch

2. Learned textInput for text binding

3. click binding for event driven
This commit is contained in:
jason.zhu 2021-05-27 04:22:28 +00:00
parent 27dfb6c739
commit 9cb6be067a
2 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ko-cart/index.html
View File

@ -7,8 +7,35 @@
</head> </head>
<body> <body>
<h1>Catalog</h1> <h1>Catalog</h1>
<form class="form-horizontal" role="form" data-bind="with:newProduct">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" placeholder="Price" data-bind="textInput:price">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" placeholder="Stock" data-bind="textInput:stock">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
<i class="glyphicon glyphicon-plus-sign">
</i> Add Product
</button>
</div>
</div>
</form>
<strong>Items:</strong> <strong>Items:</strong>
<span data-bind="text:catalog.length"></span> <span data-bind="text:catalog().length"></span>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>

45
ko-cart/js/viewmodel.js
View File

@ -1,15 +1,36 @@
"use strict"; "use strict";
var vm = (function() { var vm = (function () {
var catalog = ko.observableArray([
var catalog = [ Product(1, "T-Shirt", 10.0, 20),
Product(1, "T-Shirt", 10.00, 20), Product(2, "Trousers", 20.0, 10),
Product(2, "Trousers", 20.00, 10), Product(3, "Shirt", 15.0, 20),
Product(3, "Shirt", 15.00, 20), Product(4, "Shorts", 5.0, 10),
Product(4, "Shorts", 5.00, 10) ]);
];
return { var newProduct = Product("", "", "", "");
catalog: catalog var clearNewProduct = function () {
}; newProduct.name("");
newProduct.price("");
newProduct.stock("");
};
var addProduct = function (context) {
var id = new Date().valueOf(); // random id from time
var product = Product(
id,
context.name(),
context.price(),
context.stock()
);
catalog.push(product);
clearNewProduct();
};
return {
catalog: catalog,
newProduct: newProduct,
addProduct: addProduct,
};
})(); })();
ko.applyBindings(vm); ko.applyBindings(vm);