2. it
  3. knockout——官网demo

knockout——官网demo

mac2022-06-30  73
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://localhost:81/js/knockout.js"></script> </head> <body> <span>1:<b data-bind="text:stringValue"></b></span><br> <span>2:<b data-bind="text:passwordValue"></b></span><br> <span>3:<b data-bind="text:booleanValue"></b></span><br> <span>4:<b data-bind="text:boolean"></b></span><br> <span>5:<b data-bind="text:selectedOptionValue"></b></span> <!---valueUpdate是可以实时更新的可选选项---> <input data-bind="value:stringValue,valueUpdate: 'afterkeydown'"> <input data-bind="value:passwordValue,valueUpdate: 'afterkeydown'"> <input data-bind="value:booleanValue,valueUpdate: 'afterkeydown'"> <input type="checkbox" data-bind="checked: boolean"> <select data-bind="options: selectMutiple,value: 'selectedOptionValue'"></select> <script> var V = function(){ this.stringValue = ko.observable(0); this.passwordValue = ko.observable(0); this.booleanValue = ko.observable(0); this.boolean = ko.observable(true); this.selectMutiple = ["Alpha", "Beta", "Gamma"]; this.selectedOptionValue = ko.observable("Gamma") }; ko.applyBindings(new V()) </script> </body> </html>

　　

//demo2

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://localhost:81/js/knockout.js"></script> </head> <body> <form data-bind="submit:addItem"> <input type="text" data-bind="value: item"/> <button type="submit">submit</button> <select multiple="multiple" data-bind="options: items"></select> </form> <script> var V = function(){ this.item = ko.observable("qihao"); this.addItem = function(){ if( !this.item() )return; console.log(this.items) this.items.push( this.item() ) }.bind(this); this.items = ko.observableArray(["nono","super"]) //绑定的是数组 }; ko.applyBindings( new V ); </script> </body> </html>

　　

//DEMO3

<!doctype html> <html> <head> <meta charset="utf-8"> <title>knockOut</title> <script src="http://localhost:81/js/knockout.js"></script> </head> <body> <!-- <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> --> <br> <!-- <h2>age is : <b data-bind="text: age"></b></h2> <h2>age input : <input data-bind="value: cAge" /></h2> --> <div>click<b data-bind="text: count"></b></div> <div><button data-bind="click : addCount, disable: vis">inc</button></div> <div data-bind="visible: vis"><button data-bind="click : reset">reset</button></div> <script> function V(){ this.count = ko.observable(0); this.addCount = function(){ this.count( this.count()+1 ); }; this.vis = ko.computed(function(){ return this.count()>3 },this); this.reset = function(){ this.count(0) }; } ko.applyBindings( new V() ) /* var ViewModel = function(first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); //只要在该作用域里面有字段发生改变，就重新计算该内容的值 this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); }; console.log( new ViewModel("Planet", "Earth") ) ko.applyBindings(new ViewModel("Planet", "Earth")); */ /* var AgeBind = function(v){ this.cAge = ko.observable(v);　　　　　　//这个是只要当前作用域的字段发生改变，就重新计算生成值 this.age = ko.computed(function(){ return this.cAge(); },this); }; ko.applyBindings(new AgeBind("28")) */ </script> </body> </html>

　　

转载于:https://www.cnblogs.com/diligenceday/p/3658968.html

相关资源：JAVA上百实例源码以及开源项目
最新回复(0)