<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Knockout: Getting Started</title>
<link href="../css/fonts.css" rel="stylesheet" type="text/css" />
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../Scripts/knockout-2.3.0.debug.js"></script>
</head>
<body>
Products:
<ul data-bind="foreach: products">
<li>
<div data-bind="text: name, click: $root.selectProduct"></div>
<span data-bind="text: isSelected"></span>
</li>
</ul>
<script type="text/javascript">
var my = my || { };
$(function() {
my.Product = function(selectedItem) {
var self = this;
self.name = ko.observable();
self.model = ko.observable();
self.isSelected = ko.computed(function () {
return selectedItem() === self;
});
};
my.vm = (function() {
var data = [{ name: "Nokia", model: "520" }, { name: "LG", model: "920" }];
var products = ko.observableArray();
var selectedproduct = ko.observable();
var selectProduct = function(p) {
selectedproduct(p);
};
var loadProducts = function() {
$.each(data, function(i,p) {
products.push(new my.Product(selectedproduct).name(p.name).model(p.model));
});
};
return {
products: products,
selectProduct: selectProduct,
loadProduct: loadProducts
};
})();
my.vm.loadProduct();
ko.applyBindings(my.vm);
});
</script>
</body>
</html>
