<!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. VTK显示mhd,mha格式文件

    下一篇文章将详细介绍mhd,mha文件的构成以及如何制作void renderMhd () { // read input image vtkSmartPointer<vtkMetaImageR ...

  2. zTree实现地市县三级级联Service接口

    zTree实现地市县三级级联Service接口 ProvinceService.java: /** * @Title:ProvinceService.java * @Package:com.gwtjs ...

  3. Ubuntu 上 hi3531 交叉编译环境 arm-hisiv100nptl-linux 搭建过程

    安装SDK 1.Hi3531 SDK包位置     在"Hi3531_V100R001***/01.software/board"目录下,您可以看到一个 Hi3531_SDK_Vx ...

  4. Caused by:java.sql.BatchUpdateException:ORA-02291

    1.错误描述 Caused by:java.sql.BatchUpdateException:ORA-02291:违反完整约束条件(PEKING.FKA844BA60FCCDD33)-未找到父项关键字 ...

  5. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  6. 通过回调函数的理解来进一步理解ajax及其注意的用法

    一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

  7. [BZOJ4071][APIO2015]八邻旁之桥

    BZOJ(这题是BZOJ权限题,有权限号的就去看看吧) Luogu(良心洛谷) 题目描述 一条东西走向的穆西河将巴邻旁市一分为二,分割成了区域\(A\)和区域\(B\). 每一块区域沿着河岸都建了恰好 ...

  8. [SDOI2015]星际战争

    水题啦 网络流+二分 误差才10^-3,乱搞直接开longlong暴力每个都乘1000,输出时除一下就好了 # include <bits/stdc++.h> # define IL in ...

  9. 学习Javascript闭包（Closure）及几个经典面试题理解

    今天遇到一个面试题,结果让我百思不得其解.后来在查阅了各种文档后,理清了来龙去脉.让我们先来看看这道题: function Foo( ){ var i = 0; return function( ){ ...

  10. oracle使用中的一些问题

    一.设置自增主键(假设表的主键名为:company_id) 1)创建序列(company_autoinc): maxvalue start increment nocache; 2)创建触发器(com ...