Knockout学习笔记--使用计算属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Knockout学习笔记--使用计算属性相关的知识，希望对你有一定的参考价值。
如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢？这个时候你就可以通过计算属性来实现，这个方法依赖于一个或多个监控属性，如果任何依赖对象发生改变他们就会跟着改变。
例如，下面的 view model：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(document_ready); function document_ready() { var self = this; //创建View-Model function AppViewModel(){ this.firstName = ko.observable("xiao"); this.lastName = ko.observable("ming"); this.fullName = ko.computed(function(){ return this.firstName() + " " + this.lastName(); }, this); } //ko绑定View-Model对象 ko.applyBindings(new AppViewModel()); } </script> </head> <body> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>Full name: <strong data-bind="text: fullName"></strong></p> </body> </html>
可写的计算属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(document_ready); function document_ready() { function AppViewModel() { this.firstName = ko.observable(‘‘); this.lastName = ko.observable(‘‘); this.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: this }); } //ko绑定View-Model对象 var appViewModel = new AppViewModel(); ko.applyBindings(appViewModel); start(); function start(){ var idx = 0; var names = ["zhang san", "li si", "wang ermazi", "xiao taoqi"]; setInterval(function(){ appViewModel.fullName(names[idx++%names.length]); console.log(appViewModel.fullName()); }, 1000); } } </script> </head> <body> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>Full name: <strong data-bind="text: fullName"></strong></p> </body> </html>
值转换
有时你可能需要对底层存储的一个数据进行简单的转换之后显示给用户。例如：你可能需要存储浮点值来表示价格，但想让用户价格单位符号和固定的小数数位都一样。你可以使用一个可写的计算属性来完成价格转换，用户传入一个浮点型值自动映射成想要的格式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(document_ready); function document_ready() { function AppViewModel() { this.price = ko.observable(25.99); this.formattedPrice = ko.computed({ read: function () { return ‘$‘ + this.price().toFixed(2); }, write: function (value) { value = parseFloat(value.replace(/[^\.\d]/g, "")); this.price(isNaN(value) ? 0 : value); }, owner: this }); } //ko绑定View-Model对象 ko.applyBindings(new AppViewModel()); } </script> </head> <body> <p>Enter bid price: <input data-bind="value: formattedPrice"/></p> </body> </html>
筛选和验证用户输入
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script> <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script> <script type="text/javascript"> $(document).ready(document_ready); function document_ready() { function AppViewModel() { this.acceptedNumericValue = ko.observable(123); this.lastInputWasValid = ko.observable(true); 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绑定View-Model对象 ko.applyBindings(new AppViewModel()); } </script> </head> <body> <p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p> <div data-bind="visible: !lastInputWasValid()">That‘s not a number!</div> </body> </html>
以上是关于Knockout学习笔记--使用计算属性的主要内容，如果未能解决你的问题，请参考以下文章