博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
knockoutjs 静动态数据、行为绑定,计算属性及Sync同步更新 Value值更新事件控制...
阅读量:4984 次
发布时间:2019-06-12

本文共 1761 字,大约阅读时间需要 5 分钟。

data-bind="text: firstName"中data-bind属性是Knockout 用来显示关联UI和viewmodel的桥梁, text 表示把绑定的文本赋值给DOM元素 
click 用来关联按钮点击事件 
data-bind="value: firstName"来动态绑定到input 输入框的值 当文本框的值发生变化时,ko先更新viewmodel的数据,然后根据observables,来更新Label的值。valueUpdate: "afterkeydown"'可以控制什么事件才触发value的更新操作, 默认onchange 
observables: 观察者模式,当属性发生变化时,主动通知相关者 
computed properties: 根据基础属性计算得到新的属性,当基础属性发生变化时,ko会自动重新计算新的值 
Javascript代码  
  1. // 创建一个简单的viewmodel   
  2. // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI  
  3. function AppViewModel() {  
  4.     this.firstName = "Bert";  
  5.     this.lastName = "Bertington";  
  6.   
  7.     // 动态属性  
  8.     this.firstName = ko.observable("Bert");  
  9.     this.lastName = ko.observable("Bertington");  
  10.   
  11.     // computed properties 计算属性  
  12.     this.fullName = ko.computed(function() {  
  13.         return this.firstName() + " " + this.lastName();      
  14.     }, this);  
  15.   
  16.     // last name变大写函数(行为)  
  17.     this.capitalizeLastName = function() {  
  18.         var currentVal = this.lastName();        // Read the current value  
  19.         this.lastName(currentVal.toUpperCase()); // Write back a modified value  
  20.     };  
  21. }  
  22.   
  23. // Activates knockout.js  
  24. ko.applyBindings(new AppViewModel());  
Html代码  
  1. // data-bind属性是Knockout 用来显示关联UI和viewmodel的桥梁 text 表示把绑定的文本赋值给DOM元素  
  2. <!-- This is a *view* - HTML markup that defines the appearance of your UI -->  
  3.   
  4. // 静态文本绑定  
  5. <p>First name: <strong data-bind="text: firstName">todo</strong></p>  
  6. <p>Last name: <strong data-bind="text: lastName">todo</strong></p>  
  7.   
  8. // 使用data-bind="value: firstName"来动态绑定到input 输入框的值 当文本框的值发生变化时,ko先更新viewmodel的数据,然后根据observables,来更新Label的值  
  9. <p>First name: <input data-bind="value: firstName" /></p>  
  10. <p>Last name: <input data-bind="value: lastName" /></p>  
  11. <p>Full name: <strong data-bind="text: fullName"></strong></p>  
  12.   
  13. <button data-bind="click: capitalizeLastName">Go caps</button>  
 

转载于:https://www.cnblogs.com/amylis_chen/p/6208622.html

你可能感兴趣的文章
tornado样板
查看>>
Windows XP 文件删除之后在回收站找不到文件
查看>>
VMware Workstation安装ubuntu时提示 无法获得vmci驱动程序的版本: 句柄无效
查看>>
讨论文件输入输出
查看>>
用户和用户组管理总结
查看>>
@RequestMapping的三个用法
查看>>
dedecms /member/flink_main.php SQL Injection Vul
查看>>
nginx + vsftpd 搭建 图片服务器
查看>>
C++语言 无法通过Esc键关闭窗体
查看>>
头文件
查看>>
重置VS2010可编辑只读文件的选项
查看>>
Hadoop之MapReduce学习笔记(一)
查看>>
python学习手册笔记——33.异常编码细节
查看>>
9.1 计算机网络基础知识
查看>>
如何将DevExpress的Gridcontrol导出到Excel
查看>>
连接字符串放到配置文件中(10)
查看>>
[整理]android中几种常见的尺寸
查看>>
方法区
查看>>
Django-----ORM
查看>>
Kubernetes(k8s)集群部署(k8s企业级Docker容器集群管理)系列之flanneld网络介绍及部署(三)...
查看>>