<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

		<script type="text/javascript" src="js/knockout-3.5.0beta.debug.js" ></script>

		<script type="text/javascript">

            //创建一个View对象

            function ViewModel() {

                var self = this;

                //使用observableArray进行绑定可以动态变更option选项

                self.selectOptions = ko.observableArray([{

                    "text": "请选择",

                    "value": "0"

                }]);

                self.result = ko.observable("0"); //添加result监控属性，初始绑定值为0

                addfunction=function(){

                	alert(123);

                };

            }

            $(function() {

                var vm = new ViewModel();

                ko.applyBindings(vm);

                $("#btnAddItem").click(function() {

                    vm.selectOptions.push({

                        "text": $("#txtOptText").val(),

                        "value": $("#txtOptValue").val()

                    });

                });

            });

        </script>

	</head>

	<body>

		 <div style=" background-color:#0094ff; width:180px; margin:100px auto auto auto;">

            <select style="background-color:ActiveCaption;width:100px" data-bind="options: selectOptions, optionsText: 'text', optionsValue: 'value', value: result">

            </select>

            Value=

            <span data-bind="    text: result">

            </span>

            <div>

                Text:

                <input id="txtOptText" value="选项1" />

            </div>

            <div>

                Value:

                <input id="txtOptValue" value="1" />

            </div>

            <input type="button" data-bind="click: addfunction" value="新增选项" id='btnAddItem' />

        </div>

	</body>

</html>

　　

knockout事件绑定的更多相关文章

  1. Knockout双向绑定

    knockout双工绑定基于 observe 模式,性能高.核心就是observable对象的定义.这个函数最后返回了一个也叫做 observable 的函数,也就是用户定义值的读写器(accesso ...

  2. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  4. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  5. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  6. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  7. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  8. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  9. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

随机推荐

  1. 无法启动此程序，因为计算机中丢失QtCored4.dll。尝试重新安装该程序以解决此问题。

    在创建一个win32控制台应用程序时包含了QtCore中的头文件,并且程序编译成功(至少说明属性配置是正确的),运行此程序会出现弹出如下的一个系统错误: 这样的情况该怎么解决?提示说计算机中丢失了Qt ...

  2. vue 学前班003（生命周期）

    ue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作.学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们 ...

  3. Centos7安装Chacha20加密算法 (验证成功)

    Centos7安装Chacha20加密算法 (验证成功) 有些程序会使用Chacha20加密算法,如果Centos7系统报错Exception: libsodium not found,则缺乏M2Cr ...

  4. Python小白学习之路（二十）—【打开文件的模式二】【文件的其他操作】

    打开文件的模式(二) 对于非文本文件,我们只能使用b模式,"b"表示以字节的方式操作(而所有文件也都是以字节的形式存储的,使用这种模式无需考虑文本文件的字符编码.图片文件的jgp格 ...

  5. 【HDU5126】 stars k-d树

    题目大意:有$m$个操作,分两种:在指定三维坐标内加入一个点,询问指定空间内点的数量. 其中$m≤5*10^{4},1≤x,y,z≤10^9$ 这题几乎就是裸的$k-d$树啊.我们动态维护一棵$k-d ...

  6. 理解HashMap的原理

    HashMap内部数据结构        HashMap内部采用数组和链表结合的方式来存取数据(见下图).这种方式有什么好处呢? 我们知道,数组操作对于检索是O(1)的,能够很快的根据数组的下标定位对 ...

  7. django框架--cookie/session

    目录 一.http协议无状态问题 二.会话跟踪技术--cookie 1.对cookie的理解 2.cookie的使用接口 3.cookie的属性 4.使用cookie的问题 三.会话跟踪技术--ses ...

  8. js前端日期格式化处理

    js前端日期格式化处理 1.项目中时间返回值,很过时候为毫秒值,我们需要转换成 能够看懂的时间的格式: 例如: ​ yyyy-MM-dd HH:mm:ss 2.处理方法(处理方法有多种,可以传值到前端 ...

  9. mysql5.6常用查询sql

    查看连接数,状态 1.查询进程 show processlist  查询到相对应的进程===然后 kill    id 2.查询是否锁表show OPEN TABLES where In_use &g ...

  10. 解决ssh登陆超时方案

    ssh登陆一般默认3分钟无操作则断开连接,有时候还是很烦的,于是解决这个问题. sudo修改/etc/ssh/sshd_conf文件 #sudo vim /etc/ssh/sshd_config #在 ...