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. jquery获取所有被选中checkbox

    想要得到所有被选中的checkbox的value ,并且传给后台 var headers = ""; $('input[name="header"]:check ...

  2. (转)如何在一台电脑上开启多个tomcat 和配置让系统识别哪个具体的tomcat

    大家基本上都只在一台电脑上面启动一个Tomcat,而启动多个Tomcat会提示报错等相关故障.而假如调试负载均衡及集群的时候,需要在一台电脑上面开启多个Tomcat,那么怎么开启呢? 方法/步骤 首先 ...

  3. .net操作word lib DocX

    http://cathalscorner.blogspot.hk/2010/06/cathal-why-did-you-create-docx.html using (DocX document = ...

  4. python:爬虫

    模块: (1)url管理器:对url进行管理 (2)网页下载器(urllib2):将需要爬取的url指定的网页以字符串的形式下载下来 (3)网页解释器(BeautifulSoup):解析 利用urll ...

  5. C#(asp.net )读取ASHX文件(一般处理程序)

    c#后台获取asxh的返回数据,后台创建一个请求实例,获取请求实例的返回值 public string GetResponseByPost(string apiUrl, string queryStr ...

  6. JavaWeb技术(三):JDBC中核心接口

    一.  DriverManager 接口 DriverManager 数据库连接驱动接口,用于获取数据库连接对象Connection import java.sql.Connection; impor ...

  7. Visual Studio 2015 下 编译 libpng

    libpng https://github.com/glennrp/libpng zlib https://github.com/madler/zlib/releases https://github ...

  8. C# 用POST提交json数据

    public void GetResponse(string url, string json) { Encoding encoding = Encoding.UTF8; byte[] data = ...

  9. rem介绍

    手机端开发,一般以320px宽为最低标题.市场上的手机,大多数是360px宽. 20px=1rem是最容易换算的,基本上可以口算,除以2并缩小十倍.1px/20=0.05rem.两位小数就可以除尽了. ...

  10. javascript面向对象(三)

    主要内容: 利用原型链的方式实现继承: 原型继承的特点:即继承了父类的模板,也继承了父类的原型对象. 类继承:只继承模板(借用构造函数的方式继承). 利用call.apply方法实现: 混合继承: 扩 ...