Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function mfProduct(data) {
- var self = this;
- self.MfProductId = data.MfProductId;
- self.MfProductName = data.MfProductName;
- };
- function mfProductViewModel() {
- // Data
- var self = this;
- self.ProdId = ko.observable();
- self.ProdName = ko.observable();
- self.selectedProducts = ko.observableArray([]);
- // Operations
- self.addProduct = function () {
- if (self.ProdId() != '' && self.ProdId() != undefined) {
- self.selectedProducts.push(new mfProduct({ MfProductId: self.ProdId(), MfProductName: self.ProdName() }));
- self.ProdId("");
- self.ProdName("");
- }
- };
- self.removeProduct = function (mfProduct) {
- self.selectedProducts.remove(mfProduct);
- };
- };
- <div class="row">
- <div id="selectedProducts" class="col-sm-12" data-bind="foreach: selectedProducts">
- <div class="row" style="border: 1px solid red;">
- <div class="col-sm-10"><strong data-bind="text: MfProductName"></strong></div>
- <div class="col-sm-2"><a href="#" data-bind="click: removeProd"><i class="glyphicon glyphicon-remove-circle"></i></a></div>
- </div>
- </div>
- <div class="form-group">
- <div class="col-sm-3">
- Select product
- </div>
- <div class="col-sm-offset-3">
- <input type="hidden" id="selectedProdId" data-bind="value: ProdId" value="">
- <input type="hidden" id="selectedProdName" data-bind="value: ProdName" value="">
- <div id="searchResults" class="ddlContents">
- <ul>
- <li><a id="00001" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Milky Way</a></li>
- <li><a id="00002" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Bocadin</a></li>
- <li><a id="00003" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Carlos V</a></li>
- <li><a id="00004" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Snickers</a></li>
- <li><a id="00005" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Crunch</a></li>
- <li><a id="00006" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Power Milch</a></li>
- <li><a id="00007" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Toblerone</a></li>
- <li><a id="00008" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">KitKat</a></li>
- <li><a id="00009" href="#" onmouseover="javascript:markSelected(this);" data-bind="click: addProduct">Cacao</a></li>
- </ul>
- </div>
- </div>
- </div>
- $(document).ready(function () {
- ko.applyBindings(new mfProductViewModel());
- });
- function markSelected(anchor) {
- // Update the value of the hidden fields with id and Text coming from the "moused over" link.
- $("#selectedProdId").val(anchor.id);
- $("#selectedProdName").val(anchor.innerText);
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement