KnockoutJs简单入门知识讲解

1.Knockoutjs介绍
Knockout是一款很优秀的JavaScript库，KnockoutJS是一款MVVM前端框架，从框架的模式中我们可以看出，在页面中需要有三个必须的元素：M（模型）、V（视图）和VM（视图模型）。

一些很复杂的话，目前在入门阶段，其实很多事不清楚的，目前只要先形成一个概念，就是说knockjs有主要有两个方面：一个是数据，一个是视图。带着这样的一个初始观念去学习，会让我们更快地掌握它的相关知识。

2.Knockoutjs小例子
像这类的框架无非就是需要多用，毕竟框架更新的非常快，我们要想快速掌握一门新的技术，多去动手实践就好了，先看例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 2.视图 -->
姓：<input type="text" data-bind="value:firstname"><br><br>
名：<input type="text" data-bind="value:lastname"><br><br>
世界：<input type="text"  data-bind="value:uhome"><br><br><p>信息显示：你好<span data-bind="text:fullname"></span>,<span data-bind="text:uhome"></span>欢迎你</p><script src="js/knockout.js"></script><script><!-- 1.模型 (方式一)-->
var viewModel=function(first,last,home){this.firstname=ko.observable(first);this.lastname=ko.observable(last);this.uhome=ko.observable(home);this.fullname=ko.computed(function(){return this.firstname()+"  "+this.lastname();},this);
} <!-- 3.绑定关系-->
ko.applyBindings(new viewModel("lanfang","he","ko world!"));
</script>
</body>
</html>

上面就是一个简单的小例子，记得导入js库.

3.小例子2

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title></head>
<body>
<p>输入</p>
<!-- 动态绑定 输入框的信息和uname upass绑定  input  value-->
<p>uname：<input data-bind="value:uname,valueUpdate:'afterkeydown'"></p>
<p>upass：<input data-bind="value:upass,valueUpdate:'afterkeydown'"></p><p>输出</p>
<!-- 动态绑定 展示的信息和uname upass绑定  strong text -->
<p>uname：<strong data-bind="text:uname"></strong></p>
<p>upass：<strong data-bind="text:upass"></strong></p><script src="js/knockout.js"> </script><!-- 引入knockoutjs -->
<script>
function appViewModel(){ //给附一个默认的值  当前面的输入框改变的时候，会自动修改数据
this.uname=ko.observable("test");
this.upass=ko.observable("psw");
}
<!-- 激活绑定-->
ko.applyBindings(appViewModel());
</script>
</body>
</html>

4.填充下拉框

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>student:<select data-bind="options:allStudents,optionsText:'stuName'"></select>                                <br> <br></body><script src="js/knockout.js"> </script><!-- 引入knockoutjs -->
<script>var allStudents = [{ stuName: 'zhangsan', gender: '男', stuNum: '1001' },{ stuName: 'zhangsan2', gender:  '女', stuNum: '1002' },{ stuName: 'zhangsan3', gender:  '男', stuNum: '1003' }];
var viewModel = { };ko.applyBindings(viewModel); // Makes Knockout get to work// 注意：ko. applyBindings需要在上述HTML之后应用才有效
</script></html>

5.下拉框进阶

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>student:<select data-bind="options:allStudents,optionsText:'stuName',value:findStu"></select>                                <br> <br>You've chosen:<b data-bind="text:findStu().gender"></b>(number: <span data-bind='text:findStu().stuNum '></span>)
</body><script src="js/knockout.js"> </script><!-- 引入knockoutjs -->
<script>var allStudents = [{ stuName: 'zhangsan', gender: '男', stuNum: '1001' },{ stuName: 'zhangsan2', gender:  '女', stuNum: '1002' },{ stuName: 'zhangsan3', gender:  '男', stuNum: '1003' }];
var viewModel = { findStu:ko.observable(allStudents[0])};ko.applyBindings(viewModel); // Makes Knockout get to work// 注意：ko. applyBindings需要在上述HTML之后应用才有效
</script></html>

KnockoutJs简单入门知识讲解相关推荐

和与余数的和同余理解_5 同余 ——数论入门知识讲解系列
数学竞赛数论是纯粹数学的分支之一,主要研究整数的性质,按研究方法分为初等数论和高等数论.中学生(甚至小学生)课外数学兴趣小组的许多内容是属于初等数论的,各级别数学竞赛也会把初等数论作为重点内容进行考 ...
java mysql 有什么用_java web mysql 入门知识讲解
MySQL学习笔记总结一.SQL概述: SQL:Structured Query Language的缩写(结构化查询语言) SQL工业标准:由ANSI(ISO核心成员) 按照工业标准编写的SQ ...
js 串口通信mscomm接收undefined_VB串口通信应用开发入门知识讲解
VB是一门功能强大.简单易学的程序语言.它可以方便快捷地编制适用于数据处理.多媒体等方面的程序,而且利用ActiveX控件中的MSComm部件还能十分方便地开发出使用计算机串口的通信程序. 今天,我们 ...
手写html基础格式,手写服务器_HTML 简单入门知识
1.HTML HTML(HyperText Markup Language) 超文本标记语言,用于描述网页文档的一种标记语言. HTML 不是一种编程语言,而是一种标记语言 (markup langu ...
MySql入门知识（一）
概述 MySQL是一个真正多用户,多线程结构化查询语言数据库服务器.MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL的SQL语言是用于访问数据 ...
2016windows（10） wamp 最简单30分钟thrift入门使用讲解，实现php作为服务器和客户端的hello world...
2016最简单windows(10) wamp 30分钟thrift入门使用讲解,实现php作为服务器和客户端的hello world thrift是什么最简单解释 thrift是用来帮助各个编程语 ...
C语言超简单入门——基础知识
C语言超简单入门--基础知识一.进制转换进制:二进制.八进制.十进制.十六进制进制的脚标: 二进制:B 如:101B 八进制:Q 如:12Q 十进制:D 如:10D 十六进制: H 如:123H ...
计算机硬件知识讲解,电脑硬件入门知识详解（三大重点篇）
电脑硬件,这个我想大家应该都听说过.但要说到了解,我想没有几个人会知道吧.现在人们的生活水平提高了,电脑对我们大家来说也不是什么新鲜的事物了.但大家也只限于会用吧,如果电脑出现什么问题,我们只会关机重 ...
PHP简单入门基础知识
PHP简单入门基础知识作为一个web前端开发者第一天开始学php,整理的以下笔记,笔记并不完善,只是自我觉得和html,js有差别的地方做了下入门笔记 PHP 变量规则: 变量以 $ 符号开头,其后 ...

KnockoutJs简单入门知识讲解

KnockoutJs简单入门知识讲解相关推荐

最新文章

热门文章