KO Demo

最新推荐文章于 2024-05-21 19:09:41 发布

z-pan

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量66

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/shineqiujuan/p/3307724.html

版权

<!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>

转载于:https://www.cnblogs.com/shineqiujuan/p/3307724.html

z-pan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KO Demo

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>Knockout: Getting Started</title><link href="../css/...
复制链接

扫一扫

KO Demo

“相关推荐”对你有帮助么？