Knockoutjs 使用实践入门 (1)

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,会随着输入框的变化而变化.

 

 

 

时间: 2024-12-17 04:11:55

Knockoutjs 使用实践入门 (1)的相关文章

Quartz应用实践入门案例二(基于java工程)

在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任何程序中.只要你的程序中需要这项功能!但是对于一些刚开始学习某种框架的菜鸟而言,这似乎就不是那么简单了.如果在学习开源框架API的同时,能有一两个案例小程序配着其API去看,那应该就是事半功倍了. 本文是在自己学习源码和网上查找资料的基础上完成的,将详细叙述在java工程中如何巧妙的融入Quartz框架,小案

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

趁着上一篇文章的余温,我们继续研究一下SSIS中多个包如何调度,难道需要一个包一个包的配置调度程序吗?显然不是的,接下来我们就说一说在SSIS应用中如何批量的调度所有的作业,本文只讲述一个基本的逻辑过程以及简单测试. 1:发布SSIS包 调度包,就需要我们首先将SSIS包发布到SQLServer的集成服务下面 下面我们就着手把SSIS实践入门1中创建的两个包sqltosql.dtsx和oratosql.dtsx发布到SQLServer服务中的Integration Services下面 1.1:

【无线安全实践入门】网络扫描和ARP欺骗

文中可能存在错误操作或错误理解,望大家不吝指正. 同时也希望可以帮助到想要学习接触此方面.或兴趣使然的你,让你有个大概的印象. !阅前须知! 本文是基于我几年前的一本笔记本,上面记录了我学习网络基础时的部分笔记. 本文中的工具可能已经过时,或使用方法已经改变了,感兴趣可以深入查阅资料 (但是我还是列出以前的使用方法供大家借鉴). ps.若对无线攻击手段与WiFi破解感兴趣可以参考以下两篇文章 [无线安全实践入门]基础攻击手段与常用工具简介 [无线安全实践入门]破解WiFi密码的多个方法 ps.本

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

Knockoutjs 绑定事件 Knockoutjs 不仅支持UI 元素的属性绑定到model的属性,还支持UI 元素的事件绑定model的事件. 需求: l  click me button 每单击一次,计数器累加一次,并且把计数器次数显示到div中 l  click me button 最大可单击3次,3次过后click me button 不能使用;单击次数达到3次时,显示提示信息,并且显示reset button l  reset button 单击后click me button 计数

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

<form id="form1" runat="server">        <div>            <!--text value绑定model:itemToAdd,valueUpdate:更新数据绑定时机:按键时-->            <!---如果不指定valueUpdate,使用默认更新数据绑定,经试验并不是onchange-->            <input type="

状态机实践入门

不用怀疑,单片机的万能语言就是状态机.还希望大家不要条件反射式的看到状态机就 以为我要讲什么VHDL的东西——状态机是一种思维模式,是计算机理论的立足之本(不 相信请参考清华大学出版社的<自动机理论与应用>)——因此状态机的实现与语言本身关系并不是绝对的.本文要讨论的状态机,从实现方式上更类似于Java中常用的那种思维模式,而与VHDL相去甚远.  路要一步一步走,饭要一口一口吃,为了不把后来人吓跑,状态机理论中更多复杂的部分,我会在以后专门写文章讨论,这里我先找一个切入点,从我常用的2种状态

Nginx应用实践入门

一.HTTP协议包含很多功能 www是http功能之一 www服务端口默认是80,OSI 第7层 应用层协议 二.实现WWW服务的常用Web软件 产品:nginx,apache(静态Web软件) 三.经典的web组合 LAMP(Linux apache mysql php)==>经典 LNMP(Linux Nginx mysql php)==>国内非常流行 四.Nginx介绍 Nginx www服务软件,俄罗斯人开发,开源,性能很高 Nginx本身是一款静态(html,js,css,jpg等)

三层架构实践入门(1)

三层架构最初目的是不把数据库操作语句放到界面里,虽然可以写个公共类操作数据库,但是SQL语句还是免不了.这样做小项目没有什么问题,但是项目做大了就会难以维护.三层架构把数据访问.业务逻辑.界面分离,方便大项目维护. 为了减少难度,这里举个简单的三层架构雏形:只用DAL(Data Access Layer)层,把数据访问封装到DAL层中,UI调用DAL,原则:UI不能出现SQL. 比如我们有个表: 第0列 第一列 第二列 第三列 Id Name Age Hobby 1 泰迪熊 18 勾搭妹子 2

python 机器学习实践入门

机器学习概念概念 机器 学习是计算机科学的一个分支,从模式识别.人工智能和计算学习理论发展而来,我们可以将其作为数据挖掘的工具 侧重用于数据分析方法理解给定的数据 目的是:开发能够从先前观测的数据,通过可调整的参数进行学习的 程序,为了改善预测结果,将参数设计为可自动调整的 常见应用:垃圾邮件过滤器.搜索引擎,光学字符识别(OCR)和计算机视觉 任何一个问题都始于一个数据集,未知数据的特征根据数据集来预测:为了解决问题选用的机器学习算法用数学模型来描述,模型 包含一些参数,需要在训练集上调试.训