knockout.js
Posted youguess
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了knockout.js相关的知识，希望对你有一定的参考价值。
knockout.js
1.创建数据模型和监控属性
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8" /> <script type="application/javascript" src="../js/knockout-3.1.0.js"></script> </head> <body> <h1>姓名:<strong data-bind="text:personName"></strong></h1> <h2>年龄:<strong data-bind="text:personAge"></strong></h2> <input id="txtName" type="text" data-bind="value:personName"> <input id="txAge" type="text" data-bind="value:personAge" /> <br /> <button onclick="cancelSubscribe()">取消订阅</button> <script> var subscription=null; var ViewModel1={ personName:ko.observable("123"),//KO的双向绑定 personAge:ko.observable()// }; ko.applyBindings(ViewModel1);//激活KO //开启订阅 subscription=ViewModel1.personAge.subscribe(function (newValue) { if(isNaN(newValue)){ alert("请输入数字！"); ViewModel1.personAge(""); } }); function cancelSubscribe() { if (subscription) { subscription.dispose();//取消订阅 } } </script> </body> </html>
2.自动计算属性
2.1 Computed Observable
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="UTF-8"> <script type="application/javascript" src="../js/knockout-3.1.0.js"></script> </head> <body> firstName is <span data-bind="text:firstName"></span><br/> lastName is <span data-bind="text:lastName"></span><br /> fullName is <span data-bind="text:fullName"></span><br/> <input type="text" data-bind="value:firstName" /><br/> <input type="text" data-bind="value:lastName" /><br /> <script type="application/javascript"> function viewModel() { var self =this; self.firstName = ko.observable(""); self.lastName =ko.observable(""); //this关键字 计算属性 self.fullName = ko.computed(function () { return self.firstName()+‘.‘+self.lastName(); },self); } ko.applyBindings(viewModel); </script> </body> </html>
2.2 分解用户输入
<!DOCTYPE html> <html lang="en"> <head> <title>分解用户输入</title> <meta charset="UTF-8"> <script type="application/javascript" src="../js/knockout-3.1.0.js"></script> </head> <body> firstName is <span data-bind="text:firstName"></span><br/> lastName is <span data-bind="text:lastName"></span><br /> fullName is <span data-bind="text:fullName"></span><br/> <input type="text" data-bind="value:firstName" /><br/> <input type="text" data-bind="value:lastName" /><br /> <input type="text" data-bind="value:fullName" /> <script type="application/javascript"> function ViewModel() { var self =this; self.firstName = ko.observable(""); self.lastName =ko.observable(""); self.fullName=ko.computed({ read: function () { //读取 显示 return this.firstName() + " " + this.lastName(); }, write:function (value) { //输入的操作 var lastSpacePos = value.lastIndexOf(" "); if(lastSpacePos>0){ this.firstName(value.substring(0, lastSpacePos)); this.lastName(value.substring(lastSpacePos + 1)); } }, owner:self }); } ko.applyBindings(ViewModel); </script> </body> </html>
2.3 值的转换（value 转换）
<!DOCTYPE html> <html lang="en"> <head> <title>value值转换</title> <meta charset="UTF-8"> <script type="application/javascript" src="../js/knockout-3.1.0.js"></script> </head> <body> 数字是 <span data-bind="text:price "></span><br/> 价格是 <input type="text" data-bind="value:formattedPrice" /><br/> <script> function viewModel() { var self=this; self.price = ko.observable(12.445); self.formattedPrice=ko.computed({ read:function () { return ‘$‘ + self.price().toFixed(2);// }, write:function (value) { value = parseFloat(value.replace(/[^.d]/g, ""));// self.price(isNaN(value) ? 0 : value);// }, owner:self }); } ko.applyBindings(viewModel); </script> </body> </html>
2.4 筛选和验证用户输入
<!DOCTYPE html> <html lang="en"> <head> <title>筛选和验证用户输入</title> <meta charset="UTF-8"> <script type="application/javascript" src="../js/knockout-3.1.0.js"></script> </head> <body> 请输入新的价格：<input id="txtNumber" type="text" data-bind="value:attemptedValue"/> <div data-bind="visible:!lastInputWasValid()"> <font color="red">请输入数字！</font> </div> <script> function MyViewModel() { this.acceptedNumericValue = ko.observable(123); this.lastInputWasValid = ko.observable(true);//控制显示 true/false this.attemptedValue = ko.computed({//输入的值 read: this.acceptedNumericValue, write: function (value) { if (isNaN(value)) this.lastInputWasValid(false); else { this.lastInputWasValid(true); this.acceptedNumericValue(value); } }, owner: this }); } ko.applyBindings(new MyViewModel()); </script> </body> </html>
以上是关于knockout.js的主要内容，如果未能解决你的问题，请参考以下文章
更新 knockout.js 和 SignalR 库后，knockout-mapping js 不会更新视图中的列表