<!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. sdl的缩放问题

    SDL是一种既是开源的,也是跨平台的多媒体开发包,在各种平台上应用很广,经常和FFMPEG等解码器同时使用.对于在windows mobile等缺乏通用播放器的平台来说,是一种很好的选择.网上很多代码 ...

  2. Anaroid WebView API详解

    android提供了webView控件专门用来浏览网页 使用WebView时,在程序中装载WebView控件,可以把WebView写到布局中,也可以动态New出WebView实例,可以设置属性,比如: ...

  3. CSS3之background-clip

    1.属性简介 background-clip:padding|border|content|text|!important 2.兼容性 (1)IE6.7.8不兼容 (2)火狐3.0以上兼容 (3)Ch ...

  4. FC总线技术简介

    FC是由美国标准化委员会(ANSI)的X3T11小组于1988年提出的高速串行传输总线,解决了并行总线SCSI遇到的技术瓶颈,并在同一大的协议平台框架下可以映射更多FC-4上层协议.FC具备通道和网络 ...

  5. C#制表符过滤处理方法

    C#制表符过滤处理方法,动态替换字符串里面的制表符. /// <summary> /// Descrioption: ///需要替换字符集合,可参见MSDN /// The Trim me ...

  6. java.lang.ArrayIndexOutOfBoundsException

    1.错误描述 Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 0 at com.you.m ...

  7. Linux查看目录中的文件

    Linux查看目录中的文件 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls examples.desktop jdk 公共的 视频 文档 音乐 java ...

  8. 决策树系列（五）——CART

    CART,又名分类回归树,是在ID3的基础上进行优化的决策树,学习CART记住以下几个关键点: (1)CART既能是分类树,又能是分类树: (2)当CART是分类树时,采用GINI值作为节点分裂的依据 ...

  9. jquery 记住账号 记住密码

    <body> <label><input type="checkbox" onclick="loginBtn_user()" /& ...

  10. css实现按钮点击效果(超简单)

    在html中设置class: <button class="button1">click</button> css中如下所示: .button1{    p ...