zoukankan html css js c++ java

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>

查看全文

相关阅读:
SpringBoot-Maven打包压缩瘦身
 Docker安装Jenkins
Spring Boot 微服务应用集成Prometheus + Grafana 实现监控告警
 Spring Boot构建 RESTful 风格应用
 SpringMVC 中 @ControllerAdvice 注解
 Spring Boot 整合 Freemarker
Spring Boot中的静态资源文件
 SpringBoot配置文件 application.properties，yaml配置
 代码质量管理-安全问题
 8.Python基础面向对象的基本概念

原文地址：https://www.cnblogs.com/by-dxm/p/6760437.html