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 多个章节, ...

随机推荐

asp.net 代码注意点
1. 模糊查询时,注意要去掉空格前台: <input id="txtQJBH" type="text" runat="server" ...
SharePoint 2013 开发——开发并部署第一个APP
博客地址:http://blog.csdn.net/FoxDave 本篇我们开始对开发APP应用程序进行了解. 本篇基于本地SharePoint环境(如果是Office 365的话会方便许多),需 ...
SharePoint 2013 Nintex Workflow 工作流帮助（九）
博客地址 http://blog.csdn.net/foxdave 前叙:假期结束了,知道为什么假期如此短暂吗?因为假期的每天只有半天.春节过完了,新的一年开始了,大家或许之前在新年的时候都许下了自己 ...
CSS网页布局:网站整体居中转
body{ margin:0 auto; padding:0 auto; text-align:center;} 只设置body属性对ie浏览器有效果,但是对火狐等不起作用 body{ ...
hdu 2097
ps:WA了两次好像....Sky数是三个进制下的各位数之和相等...而不是都等于22...我傻逼了... 代码: #include "stdio.h" int inp(int a ...
集合set的使用
将无序对象储存在集合中集合是类似于数组的一组对象,只是其中包含的项目是无序的(而数组是有序的).您通过枚举集合中的对象,或者将过滤器或测试应用到集合,来随机访问集合中的对象(使用 anyObject ...
LeetCode----Unique Binary Search Trees 2
Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...
关于EOF的种种。
EOF读取数据是读取一个向下进行一次,知道没有数据可以读取. EOF的使用,用while和eof的
Android沉浸式(侵入式)标题栏(状态栏)Status（三）
Android沉浸式(侵入式)标题栏(状态栏)Status(三) 从附录文章1,2可以看到,依靠Android系统提供的标准方案,状态栏即便在透明状态下,仍然有些半透明而不是全透明.本文是And ...
Java Servlet——改进的CGI
一.关于Servlet 在上一篇随笔中,我们看到了CGI存在的不足,其每次请求都需加载和运行一个CGI程序.若使用Java编写CGI程序,需要为每个请求都启动一个系统进程以及JVM,其执行效率大大降低 ...

knockoutJs基础1 - 简单的knockoutjs实现

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

随机推荐

热门专题