KnockOutJS（一）

概念：Knockoutjs是一个JavaScript实现的MVVM框架

核心功能：

1. Declarative bindings　　声明式绑定

2. Observables and dependency tracking　　监听值得改变和依赖跟踪

3. Templating　　模板

使用步骤：

1.往项目中拖进

2.写一个ViewModel方法，在ViewModel方法里完成：

声明赋值 -》this.firstName = "Zixin" ; this.lastName = "Yin";

然后显示：<p data-bind="text: firstName"></p>

　　　　　<p data-bind="text: lastName"></p>

这样就可以完成显示了，把ViewModel方法中声明的值显示在<p>上

View就是<p>，Model就是this.firstName,this.lastName，必须要把View与Model关联起来才有效果，并且下面这行代码必须写到全部页面加载完成后调用

$(function () {
　　ko.applyBindings(new ViewModel());
});

接下来就是监听值的改变：

this.firstName = ko.observable("Zixin");
this.lastName = ko.observable("Yin");

这样就完成输入框值的改变，<p>标签显示的值也跟着改变

如果关联了多个值，其中一个值的改变，这个总值也跟着改变，就要用到　　ko.computed（）

this.fullName = ko.computed(function () {
　　return this.lastName() + " " + this.firstName();
}, this)

如果点击某个按钮，引发其他值的改变就要用到　　this.lastName（改变的值）

this.capitalizeLastName = function () {
　　this.lastName(this.lastName().toUpperCase());
}

以上就是绑定和监听的基本使用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Scripts/jquery-1.7.1.min.js"></script><script src="Scripts/knockout-3.4.2.js"></script><script type="text/javascript">function ViewModel() {this.firstName = "Zixin";this.lastName = "Yin";this.firstName = ko.observable("Zixin");this.lastName = ko.observable("Yin");this.fullName = ko.computed(function () {return this.lastName() + " " + this.firstName();}, this)this.capitalizeLastName = function () {this.lastName(this.lastName().toUpperCase());}}$(function () {ko.applyBindings(new ViewModel());});</script>
</head>
<body><div>       <p data-bind="text: firstName"></p><p data-bind="text: lastName"></p><input data-bind="value: firstName" /><input data-bind="value: lastName" /><p data-bind="text: fullName"></p><button data-bind="click: capitalizeLastName">Caps</button></div>
</body>
</html>

实现下面这种订单效果，随着数量的变化，总金额也跟着改变

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Scripts/jquery-1.7.1.min.js"></script><script src="Scripts/knockout-3.4.2.js"></script><script type="text/javascript">//一定要页面加载完成调用Model$(function () {ko.applyBindings(new Order());});var products = [{ name: "Thinkpad X1", price: 9000 },
{ name: "Hp ProBook", price: 5555 },
{ name: "Mouse", price: 45 }];function Order() {var self = this;self.items = ko.observableArray([//This data should load from server new Item(products[0], 1),new Item(products[1], 2)]);self.price = ko.computed(function () {var p = 0;for (var i = 0; i < self.items().length; i++) {var item = self.items()[i];p += item.product.price * item.amount();}return p;}, self);}function Item(product, amount) {var self = this;this.product = product;this.amount = ko.observable(amount);this.subTotal = ko.computed(function () {return self.amount() * self.product.price;}, self);}</script>
</head>
<body><div><table><thead><tr><td>Name</td><td>Amount</td><td>Price</td></tr></thead><tbody data-bind="foreach:items"><tr><td data-bind="text: product.name"></td><td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td><td data-bind="text: subTotal"></td></tr></tbody></table><h3>Order Price:<span data-bind="text: price"></span></h3></div>
</body>
</html>

转载于:https://www.cnblogs.com/BOSET/p/7083508.html

KnockOutJS（一）相关推荐

[转]Knockoutjs快速入门
本文转自:http://www.cnblogs.com/yinzixin/archive/2012/12/21/2827356.html Knockoutjs是一个JavaScript实现的MVVM框 ...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
MVVM架构~knockoutjs系列之验证成功提示显示
对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid ...
MVVM架构~knockoutjs实现简单的购物车
返回目录概念相关购物车相信大家都用过,很方便,可以将多个商品添加到购物车,并且可以修改购买商品的数据,当然为了用户体验好,在修改数据时,你的价格也会出现变化的,这使用JS可以实现,但我认为,代码量 ...
knockoutjs ajax分页,KnockoutJS 3.X API 第四章之数据控制流foreach绑定
foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM- ...
Magicodes.WeiChat——自定义knockoutjs template、component实现微信自定义菜单
2019独角兽企业重金招聘Python工程师标准>>> 本人一向比较喜欢折腾,玩了这么久的knockoutjs,总觉得不够劲,于是又开始准备折腾自己了. 最近在完善Magicodes ...
重拾Javascript (四) KnockoutJs使用
利用KnockoutJs来进行数据绑定及隔行不同样式或不同绑定数据操作效果:[点击加载更多按钮加载更多数据可从服务器来进行获取] 代码:[KO通过data-bind进行数据绑定有TEXT,HTM ...
java用mvvm,[Java教程]MVVM架构~使用boxy和knockoutjs实现编辑功能
[Java教程]MVVM架构~使用boxy和knockoutjs实现编辑功能 0 2014-04-24 14:00:08 返回目录这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验 ...
KnockoutJS 3.X API 第一章简介
本文纯正翻译自官网API文档.其中包含一下个人理解. 官网API地址:http://knockoutjs.com/documentation/introduction.html 简介 Knockout ...
Knockoutjs 实践入门 (2) 绑定事件
Knockoutjs 绑定事件 Knockoutjs 不仅支持UI 元素的属性绑定到model的属性,还支持UI 元素的事件绑定model的事件. 需求: l click me button 每单击 ...

KnockOutJS（一）

KnockOutJS（一）相关推荐

最新文章

热门文章