knockoutJs基础1 - 简单的knockoutjs实现

简单的knockoutjs实现

1、knockoutJs是在MVVM的机制下实现的，所以要有view（HTML页面中的DOM标签）和viewModel（JavaScript中的js代码）。

2、在view中通过data-bind进行数据绑定。

3、在js中通过ko.observable()和ko.applyBindings()方法进行绑定。

4、过程

（1）建立html页面

（2）引入jQuery库和knockoutjs库

（3）建立html标签

（4）js代码实现绑定

<!DOCTYPE html>

<html>

<head>

<script type='text/javascript' src='js/jquery-1.10.2.js'></script>

<!--引入knockoutjs库，即knockoutJs安装-->

<script type='text/javascript' src='js/knockout.js'></script>

    <meta charset="UTF-8"/>

    <title>simple test</title>

</head>

<body>

<!--view 绘制HTML页面，实现knockoutJs绑定<span data-bind="text:personName">  text用于显示文字， 显示名字和年龄-->

The name is <span data-bind="text:personName"></span>

<br>

The age is <span data-bind="text:personAge"></span>

<script type="text/javascript">

    //定义用户名和年龄

    var  name = "Bob";

    var age = 12;

    //给输出的内容进行赋值

    //ko.observable 提供参数的动态变化

    var myViewModel = {

        personName: ko.observable(name),

        personAge: ko.observable(age)

    };

    //通过ko.applyBindings()方法进行绑定

    ko.applyBindings(myViewModel);

 </script>

</div>

</body>

</html>

knockoutJs基础1 - 简单的knockoutjs实现的更多相关文章

mysql数据库基础的简单操作指南
最近在学习mysql,本文是做的关于mysql学习的笔记,跟大家分享一下,希望对大家学习mysql知识有所助益.mysql现在几乎已经成了网站建设的主流数据库,很多php网站系统都采用了mysql数据 ...
ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...
ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 登录登出上一章节我们总算完善了注册的功能,而且也添加了一个用户,现 ...
ASP.NET Core 新增用户 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 新增用户 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 新增用户上一章节我们实现了一个注册表单,但也留了一些东西还没完成, ...
ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 用户注册上一章节我们终于迁移完了 Identity 的数据,也创建 ...
ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 迁移数据上一章节中我们配置了 ...
ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 配置上一章节我们简单介绍了下 Id ...
ASP.NET Core Identity 验证特性 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 验证特性 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 验证特性上一章节我们简单介绍了 ...
ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 框架前面我们使用了 N 多个章节, ...

随机推荐

springMVC文件上传（转）
原文链接: http://www.cnblogs.com/lonecloud/p/5989905.html 在Spring-mvc.xml注入bean 1 <!-- 配置文件上传,如果没有使用文 ...
Struts2 validate校验
一般的,用户注册的时候,我们需要校验一些用户提交过来的参数. 一般有两道屏障,一是在前台页面上使用js进行验证,直接杜绝了不正常信息的提交.二是将提交过来的信息进行验证,不通过则返回注册页面并显示错误 ...
上架app 到app store 的出现： “The IPA is invalid. It does not inlude a Payload directory.”错误处理
今天打包上传app到app store上遇到的一个错误,在xcode6.2下提示: The IPA is invalid. It does not inlude a Payload director ...
lib静态链接库，dll动态链接库，h文件
最近在弄摄像头,发现我在调用摄像头自带的函数的时候,库没连接上,于是经过高人指点,学习了一下lib静态链接库,dll动态链接库来补充一下自己的基础知识. 一.首先我们来介绍一下lib静态链接库. li ...
Oracle之ROW_NUMBER() OVER函数
语法:ROW_NUMBER() OVER(ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的select ACD_ID,ROW_NUMBE ...
Virtual Friend Function
一般而言,友元作为一种紧耦合的设计,被视作类的一部分.一个经典的应用就是关于类的序列化和反序列化. class A { friend ostream& operator<<(ost ...
php大力力 [021节]mysql表名在mac下不能大写
2015-08-27 php大力力021.mysql表名在mac下不能大写刚才数据库里面,phpMyAdmin狂出错. Some errors have been detected on the s ...
Ubuntu安装samba的问题
问题: root@ubuntu:~# apt-get install samba 正在读取软件包列表... 完成正在分析软件包的依赖关系树正在读取状态信息... 完成有一些软件包无法被安装.如果 ...
MATLAB简单实现ID3
再看<MATLAB数据分析与挖掘实战>,简单总结下今天看到的经典的决策树算法——ID3. ID3:在决策树的各级节点上,使用信息增益的方法作为属性的选择标准,来帮助确定生成每个节点时所应采 ...
phpstorm-file watcher
在项目中使用了sass,将scss编译成css的时候,每次都需要compass watch netbeans产品带有file watcher功能三大类 1,less,scss,sass into c ...

knockoutJs基础1 - 简单的knockoutjs实现

knockoutJs基础1 - 简单的knockoutjs实现的更多相关文章

随机推荐

热门专题