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--基本用法的更多相关文章

  1. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  2. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  3. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  4. knockout.js的简介和简单使用

    1.knockout简介knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化knockout有四大重要概念:1)声明式绑定:使用简明移读的语法很容易地将模型(m ...

  5. 7.Knockout.Js(Mapping插件)

    前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...

  6. 前端MVVM框架:Knockout.JS(一)

    前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...

  7. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  8. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

  9. 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 的目的是 ...

  10. 【原】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) ...

随机推荐

  1. finger的使用

    finger命令用来查询一台主机上的登录账号的信息,通常会显示用户名.主目录.停滞时间.登录时间.登录Shell等信息,使用权限为所有用户. 安装 sudo apt-get install finge ...

  2. hdu 6035(树形dp)

    题意:给你棵树,树上每个节点都有颜色,每条路径上有m种颜色  问你所有路径上出现的颜色的和 思路:答案求的是每种颜色对路径的贡献  我们可以反过来每种颜色不经过的路径的条数 假设根节点的颜色为x  我 ...

  3. 洛谷P2831 愤怒的小鸟——贪心?状压DP

    题目:https://www.luogu.org/problemnew/show/P2831 一开始想 n^3 贪心来着: 先按 x 排个序,那么第一个不就一定要打了么? 在枚举后面某一个,和它形成一 ...

  4. OPENCL 错误码

    #define CL_SUCCESS 0 #define CL_DEVICE_NOT_FOUND -1 #define CL_DEVICE_NOT_AVAILABLE -2 #define CL_CO ...

  5. EasyUI Form表单提交

    转自:https://www.cnblogs.com/net5x/articles/4576926.html Form(表单) 使用$.fn.form.defaults重写默认值对象 form提供了各 ...

  6. Android网络相关代码

    /** * 获取本机的Ip * * @return */ public String getLocalIpAddress() { try { for (Enumeration<NetworkIn ...

  7. 盘点国内网站常用的一些 CDN 公共库加速服务(转载)

    百度CND jQuery 地址:<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></scri ...

  8. 17年day5

    /* 嗯,一切都快要结束了. 觉得不必要写太多,从day5开始就挺好吧. 记得去年这时候看到峰峰博客里的倒计时,心里还毫无波动,只是走的时候挺伤心. 现在轮到了我们. 峰峰我想你. 衷心祝zjk和my ...

  9. python实现对excel数据进行修改/添加

    import osimport xlrdfrom xlutils.copy import copydef base_dir(filename=None): return os.path.join(os ...

  10. Maven构建的生命周期

    什么是构建生命周期 构建生命周期是一组阶段的序列(sequence of phases),每个阶段定义了目标被执行的顺序.这里的阶段是生命周期的一部分.举例说明,一个典型的 Maven 构建生命周期是 ...