<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #content1{padding: 20px;} </style> </head> <body> <div id="content1"> <div data-bind="component:'MessagerAndList'"></div> </div> <script src="scripts/jQuery183.js"></script> <script src="scripts/knockout30.js"></script> <script> $(function(){ ko.components.register( 'MessagerAndList',{ viewModel:function(){ var self = this; self.Account = ko.observable('tom'); self.MessageText = ko.observable(''); self.Send = function(){ self.MessageList.push({message:self.MessageText(),account:self.Account()}); self.MessageText(""); }; self.MessageList = ko.observableArray([]); }, template:'<input type="text" data-bind="value:MessageText" /><button id="Send" data-bind="click:Send" >发送</button><ul data-bind="foreach:MessageList"><li><p data-bind="html:message">文本内容1</p><b data-bind="html:account"></b></li></ul>' } ); ko.applyBindings(); }); </script> </body> </html>
作者可以通过传入参数改变：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #content1{padding: 20px;} </style> </head> <body> <div id="content1"> <div data-bind="component:{name:'MessagerAndList',params:'jerry'}"></div> </div> <script src="scripts/jQuery183.js"></script> <script src="scripts/knockout30.js"></script> <script> $(function(){ ko.components.register( 'MessagerAndList',{ viewModel:function(params){ var self = this; self.Account = ko.observable(params != null ? params:"tom"); self.MessageText = ko.observable(''); self.Send = function(){ self.MessageList.push({message:self.MessageText(),account:self.Account()}); self.MessageText(""); }; self.MessageList = ko.observableArray([]); }, template:'<input type="text" data-bind="value:MessageText" /><button id="Send" data-bind="click:Send" >发送</button><ul data-bind="foreach:MessageList"><li><p data-bind="html:message">文本内容1</p><b data-bind="html:account"></b></li></ul>' } ); ko.applyBindings(); }); </script> </body> </html>