Konckout第六个实例：自定义组件 -- 发表评论

<!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>