1  是什么?

使用MVVM模式的简单,动态的Javascript UI.

          2   优点

    •  声明式绑定
    •  UI 自动更新
    • 依赖追踪 
    • 模板化 

        3 如何使用 

 <!--(1)引入knockout js 库-->
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.js"  type="text/javascript"> </script>
 <script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"  type="text/javascript" > </script>
<script type="text/javascript">   
//(2)定义绑定对象
 function viewModel(firstName,lastName) {       
//使用双向绑定observable
 this.firstName =ko.observable( firstName);      
  this.lastName = lastName;    
};
$(function()
{
    //(3)ko.applyBindings 把模型与申明对象viewModel关联起来(Ko 就是 knockoutjs 的简写,)
   // ko.applyBindings 调用时,保证html加载完毕
    ko.applyBindings(new viewModel("bob","hongbo"));
});

         
 
运行js后可以看到,使用了双向绑定的的firstname,会随着输入框的变化而变化.
 
 
 

Knockoutjs 实践入门 (1) 属性绑定的更多相关文章

  1. Knockoutjs 实践入门 (2) 绑定事件

    Knockoutjs 绑定事件 Knockoutjs 不仅支持UI 元素的属性绑定到model的属性,还支持UI 元素的事件绑定model的事件. 需求: l  click me button 每单击 ...

  2. Knockoutjs 实践入门 (3) 绑定数组

    <form id="form1" runat="server">        <div>            <!--text ...

  3. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

  4. WCF宿主实践入门

    本篇属于WCF实践入门,由于博主本人水平有限,没有理论上的介绍,仅仅从其几种不同的宿主方式分别介绍WCF的使用. WCF有多种宿主方式:1.自托管宿主,2.windows service宿主,3.II ...

  5. SSIS实践入门2:批量包的调度和SQLServer代理作业配置

    趁着上一篇文章的余温,我们继续研究一下SSIS中多个包如何调度,难道需要一个包一个包的配置调度程序吗?显然不是的,接下来我们就说一说在SSIS应用中如何批量的调度所有的作业,本文只讲述一个基本的逻辑过 ...

  6. KnockoutJS-自定义属性绑定

    在knockoutjs中,已有的绑定功能已经十分强大,基本上可以不需要再去考虑扩展了,但是,也有例外的场景,面对这种场景,还是得去完成,knockoutJS提供了自定义绑定来扩展绑定功能. 一.新建绑 ...

  7. 【无线安全实践入门】破解WiFi密码的多个方法

    本文希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. 文中可能存在错误操作或错误理解,望大家不吝指正. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的 ...

  8. Delphi XE2 之 FireMonkey 入门(31) - 数据绑定: 绑定数据库

    Delphi XE2 之 FireMonkey 入门(31) - 数据绑定: 绑定数据库 一.全设计时操作: 先在窗体上放置控件: DataSource1    : TDataSource; Clie ...

  9. CPF 入门教程 - 属性和事件(七)

    CPF C#跨平台桌面UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) CPF 入门教程 - 绘图(四) CPF 入门 ...

随机推荐

  1. Unity 之 Shader 对Z深度的偏移

    对Z深度的偏移 Offset 指令给了我们一个操作正常的ZTest 检测结果的手段. Offset有两个参数,这两个参数理解起来不是很直观,而且具体实现是和硬件相关的 下面在实际例子中看他的效果 Sh ...

  2. LINUX 命令定期执行可执行文件

    linux命令将nodejs文件变成可执行文件 在linux中一般我们在运行node文件时用的命令为: node example.js 首先.删除文件后缀,在linux命令下添加可执行权限 mv ex ...

  3. 记一次PHP7+opcache+zmq出现SIGSEGV 问题的查找(一次不成功的bug查找)

    Title:  记一次PHP7+opcache+zmq出现SEGSEGV问题的查找(一次不成功的bug查找) bug来历自述:线上代码PHP环境是5.2,为了提升性能(逼格),于是升级为PHP7并使用 ...

  4. 微信公众平台创建自定义菜单中文编码导致system error

    创建包含了中文的自定义菜单时总是返回{"errcode":-1,"errmsg":"system error"},要将编码方式设置为UTF- ...

  5. 20151210study

    -----------------------------------------------------The election officials were not neutral.选举官员并不是 ...

  6. read函数返回值始终为1

    部分程序如下: while(count=read(fd_s,buf,512)>0)      printf("count=%d\n",count);      write(f ...

  7. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  8. [转]Snappy压缩库安装和使用之一

    Snappy压缩库安装和使用之一 原文地址:http://blog.csdn.net/luo6620378xu/article/details/8521223 近日需要在毕业设计中引入一个压缩库,要求 ...

  9. 如何将C++代码逆向生成类图 (VS2013)

    1. 将代码添加到VS2013工程中: 2. 切换到"类视图": 3. 选中项目 右键"视图"->"查看类图". 如果项目文件太多的话 ...

  10. js处理匿名函数

    首先js 有DOM0 和DOM2级事件 DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序 一个元素可以绑定多个事件 DOM0: <div i ...