<!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. Struts2实现文件上传（二）

    Struts2实现文件上传 文件上传页面 file.jsp: <%@ page language="java" import="java.util.*" ...

  2. Flex上传文件报“Error #2038”

    1.错误描述 ioerror: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 t ...

  3. 芝麻HTTP：JavaScript加密逻辑分析与Python模拟执行实现数据爬取

    本节来说明一下 JavaScript 加密逻辑分析并利用 Python 模拟执行 JavaScript 实现数据爬取的过程.在这里以中国空气质量在线监测分析平台为例来进行分析,主要分析其加密逻辑及破解 ...

  4. Educational Codeforces Round 36 (Rated for Div. 2) E. Physical Education Lessons

    提供两种思路 一种线段树区间更新 另一种用map维护连续的区间,也是题解的思路 第二种很难写(我太渣,看了别人的代码,发现自己写的太烦了) #include<iostream> #incl ...

  5. 使用AOP的好处

    原始代码的写法 既然要通过代码来演示,那必须要有例子,这里我的例子为: 有一个接口Dao有insert.delete.update三个方法,在insert与update被调用的前后,打印调用前的毫秒数 ...

  6. jquery中ajax序列化提交form表单的几种方法。

    一,ajax主流的方法 $.ajax({ type: 'post', url: 'your url', data: $("form").serialize(), success: ...

  7. mysql下如何删除本节点下的所有子节点小记

    在开发过程中,经常会遇到树形结构的数据,在删除某个节点时候其所有的子节点都要被删除,可以使用如下方法: 1.添加记录该节点所有父节点的ID的字段(parent_ids),并用逗号隔开(一定是逗号),如 ...

  8. 云计算之路-阿里云上：3个manager节点异常造成 docker swarm 集群宕机

    今天 11:29 - 11:39 左右,docker swarm 集群 3 个 manager 节点同时出现异常,造成整个集群宕机,由此给您带来很大的麻烦,请您谅解. 受此次故障影响的站点有:博问,闪 ...

  9. PHPStorm 最新版 去掉参数提示 parameter name hints

    最新的phpstorm有个默认开启的参数名和类型提示功能, 这对于开发有很大的帮助,但是对于有些同学来说,刚开始可鞥不是很习惯,所以就需要把他给关闭. 在 配置面板中搜索 parameter name ...

  10. mac 配置虚拟主机

    http://www.upwqy.com/details/4.html 编辑httpd.conf文件,输入命令: vim /etc/apache2/httpd.conf 编辑httpd-vhosts. ...