knockout.js--基本用法
1,HTML元素的面向对象的赋值,数据绑定
text绑定:为p,span,div,td等加text属性值(即元素内部显示的文本),
value绑定:为input添加value属性值,
attr绑定:为元素动态添加他们的属性,如a标签的href,title等等
visible绑定:动态显示隐藏指定的标记,TRUE为显示,FALSE为隐藏
width绑定:可以绑定一个对象,然后在内部标记里就可以访问对象的属性。
<p data-bind="with:lines">
单价:<input type="text" data-bind='value:productPrice, valueUpdate: "afterkeydown"' />
数量:<input type="text" data-bind='visible:productPrice() > 0,value: productCount, valueUpdate: "afterkeydown"' />
小计:<span data-bind="text:total"></span> </p>
<script type="text/ecmascript">
var product = function () {
self = this;
self.id = 1;
self.name = "测试产品";
self.productPrice = ko.observable("0"); //ko.observable会先设置值再返回一个函数赋值给 价格(self.productPrice),价格就被实时监控,通过productPrice()获取属性值,通过productPrice("4567")改变变量的值
self.productCount = ko.observable("1");
self.total = ko.computed(function () { return self.productCount() * self.productPrice();
});
}
var products = function () {
var self = this;
self.lines = ko.observable(new product());//new 实例化一个函数==view model,或直接声明一个对象成为view model
}
ko.applyBindings(new products());//data-bind将viewmodel和HTML关联一起,但是浏览器不能识别data-bind,ko.applyBindings(ele1,ele2)激活knockout。applyBindings有两个参数,第一个为必选(创建viewModel),第二个可选用来指定knockout控制HTML的范围。
</script>
当productPrice 为0时,会将productCount所在的元素隐藏,而这个实例中的数据返回为一个对象lines,这时如果希望访问它内部属性,需要我们使用with关键字。
knockout.js--基本用法的更多相关文章
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- knockout.js的简介和简单使用
1.knockout简介knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化knockout有四大重要概念:1)声明式绑定:使用简明移读的语法很容易地将模型(m ...
- 7.Knockout.Js(Mapping插件)
前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...
- 前端MVVM框架:Knockout.JS(一)
前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- MVVM大比拼之knockout.js源码精析
简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作
1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2) ...
随机推荐
- SRM598 Div1
这次直接进到div1里面搞了,不过div1果然难度要高一些 第一题直接贪心算法了... 先排序,然后判断是否三个小于100,然后2个,最后一个 第二题看错了输入数据,理解错了题意,失误 第三题比较难办 ...
- [置顶] Silverlight之控件应用总结(一)(3)
[置顶] Silverlight之控件应用总结(一)(3) 分类: 技术2012-04-02 20:35 2442人阅读 评论(1) 收藏 举报 silverlightradiobuttondatat ...
- 【USACO 2010FEB】 slowdown
[题目链接] 点击打开链接 [算法] dfs序 + 线段树 树链剖分同样可以解决这个问题 [代码] #include<bits/stdc++.h> using namespace std; ...
- 词典(二) 哈希表(Hash table)
散列表(hashtable)是一种高效的词典结构,可以在期望的常数时间内实现对词典的所有接口的操作.散列完全摒弃了关键码有序的条件,所以可以突破CBA式算法的复杂度界限. 散列表 逻辑上,有一系列可以 ...
- J201700526-hm
プレーンテキスト 纯文本 きも 肝 リレーショナル 亲属的,相关的,有关的; ギャップ 缺口; 间隔; 分歧;
- codevs1669(dfs)子集和目标值
1692 子集和的目标值 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 给定n个整数in和目标值T,求某一非空子集 ...
- P2476 [SCOI2008]着色方案
传送门 数学太珂怕了--膜一下->这里 记\(sum[i]\)为题中\(c[i]\)的前缀和,\(C[i][j]\)表示\(C_{i}^j\) 设\(f[i][j]\)表示前面\(i\)中颜色已 ...
- UVa 101 - The Blocks Problem STL
题目:给你n个方块,有四种操作: .move a onto b,把a和b上面的方块都放回原来位置,然后把a放到b上面: .move a over b,把a上面的放回原处,然后把a放在b所在的方块堆的上 ...
- 二分查找 HDOJ 2141 Can you find it?
题目传送门 /* 题意:给出一个数,问是否有ai + bj + ck == x 二分查找:首先计算sum[l] = a[i] + b[j],对于q,枚举ck,查找是否有sum + ck == x */ ...
- tns no listener
ip 应该为192.168 实际上是 196.168