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

Konckout第六个实例：自定义组件 -- 发表评论的更多相关文章

  1. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  2. 设置tabBar、使用第三方插件和自定义组件使用简单实例

    创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息 简单思路 底部导航添加三 ...

  3. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  5. axure复用-自定义组件,母版(模板)

    组件(控件)是用于设计线框图的用户界面元素.在组件(控件)面板中包含有常用的控件库,如按钮.图片.文本框等.从组件面板中拖动一个控件到线框图区域中,就可以添加一个组件.组件可以从一个线框图中被拷贝(C ...

  6. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  7. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  8. vue初级学习--组件的使用(自定义组件)

    一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...

  9. 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件

    博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...

随机推荐

  1. Caused by: java.net.SocketException: Software caused connection abort: socket write error

    1.错误描述 [ERROR:]2015-05-06 10:54:18,967 [异常拦截] ClientAbortException: java.net.SocketException: Softwa ...

  2. mobile开发中常用的css

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不 ...

  3. 双刃剑MongoDB的学习和避坑

    双刃剑MongoDB的学习和避坑 MongoDB 是一把双刃剑,它对数据结构的要求并不高.数据通过key-value的形式存储,而value的值可以是字符串,也可以是文档.所以我们在使用的过程中非常方 ...

  4. javaWeb之自动发送邮件生日祝福(ServletContextListener监听)

    在看完本随笔仍然不理解的可以看  javaWeb邮箱发送  :里面有具体的邮箱服务器配置 企业在员工生日当天发送邮箱生日祝福: 一般是用监听器完成:  而合适的监听是ServletContextLis ...

  5. html基础加强2

    1.表单元素 表单元素一定要提交在form标签里面 2.id和name 所有元素都有ID,但只有表单元素才有name ID不可以重复,name可以重复 name属性的目的时可以将数据提交到服务器.id ...

  6. Unity3D 引擎基础 C# （数据结构入门） Unity3D 界面 UI（NGUI）（动画系统，导航系统）（委托与事件，常用设计模式）

    Geomagic Sculpt 2016.2 Windows Software 11个月前 (01-17) 0评论 Geomagic Sculpt 触觉式三维设计 触碰您的设计使用三维工具做三维设计. ...

  7. Spring Data（一）概念和仓库的定义

    Spring Data(一)概念和仓库的定义 Spring Data的主要任务是为数据访问提供一个相似的.一致的.基于Spring的编程模型,同时又保留着下面各个数据存储的特征.它使得使用数据访问技术 ...

  8. 【Luogu1414】又是毕业季II（数论）

    [Luogu1414]又是毕业季II(数论) 题面 题目背景 "叮铃铃铃",随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘 ...

  9. 【BZOJ4196】【NOI2015】软件包管理器（树链剖分,线段树）

    [BZOJ4196][NOI2015]软件包管理器 题面 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你 ...

  10. HDU4812

    树分治 求逆元请递推,不然会TLE 开桶记录即可 注意常数 # pragma comment(linker,"/STACK:102400000,102400000") # incl ...