<!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. java程序调用xfire发布的webService服务

    昨天用xfire搭好了一个简单的webService的服务,可以在浏览器访问,今天便想要尝试以下如何调用这个服务及相关的方法.在网上查找了一些资料后,实现过程如下. 1.创建一个maven web项目 ...

  2. HI3531uboot开机画面

    startvo 0 36 13; startgx 0 0x88000000 1600 0 0 800 600; //startgx 0 0x88000000 2048 0 0 1024 768; se ...

  3. R语言︱文本挖掘——jiabaR包与分词向量化的simhash算法（与word2vec简单比较）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- <数据挖掘之道>摘录话语:虽然我比 ...

  4. Meet Python

    关于python 入门书<Head First Python>的一些读书笔记,用以备忘. 下载安装Python 下载地址: https://www.python.org/downloads ...

  5. Codeforces Round #424 Div2 E. Cards Sorting

    我只能说真的看不懂题解的做法 我的做法就是线段树维护,毕竟每个数的顺序不变嘛 那么单点维护 区间剩余卡片和最小值 每次知道最小值之后,怎么知道需要修改的位置呢 直接从每种数维护的set找到现在需要修改 ...

  6. Hibernate【缓存】知识要点

    对象状态 Hibernate中对象的状态: 临时/瞬时状态 持久化状态 游离状态 学习Hibernate的对象状态是为了更清晰地知道Hibernate的设计思想,以及是一级缓存的基础...当然啦,也就 ...

  7. 易理解java代码8皇后问题

    马上就要蓝桥杯比赛了,我这些算法还是不会,确实有点慌,今天一天早上睡到很晚不愿起床,然后才开始研究8皇后问题.这也是典型的回溯与递归问题.其实本质上和马踏棋盘问题非常类似,八皇后问题呢,就是要判断主对 ...

  8. val(),text(),html()的区别

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> ...

  9. beautifulsoup库使用

    介绍与安装 Beautiful Soup 是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据.BeautifulSoup 用来解析 HTML 比较简单, API非常人 ...

  10. [HNOI2015]亚瑟王

    题面在这里 题意 \(n\)张卡按照一定顺序排列,每轮从第\(1\)张开始考虑到最后一张,考虑一张卡时有\(p[i]\)的概率产生\(d[i]\)的贡献,产生贡献时直接退出该轮并在之后的考虑中直接跳过 ...