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

随机推荐

BT3入门之中文语言支持
汉化: 1.更新软件库:apt-get update 2.安装中文语言包:apt-get install language-support-zh apt-get install language- ...
APP store 审核注意点
磨刀不误砍柴工.作为手机应用开发者,你需要向应用商店提交应用审核,迅速通过审核可以让你抢占先机.对苹果iOS应用开发者来说尤其如此.苹果应用商店的审核近乎吹毛求疵,下面这些清单可以让你知道苹果会在哪些 ...
《Java7中下划线的新特性》
//Java7引入了一个新功能:程序员可以在数值中使用下画线,不管是 //整形数值,还是浮点型数值,都可以自由地使用下划线.通过下划线 //分隔,可以更直观的分辨数值中到底有多少位. public c ...
《day18_String练习_基本类型包装类_集合入门》
package cn.itcast.api.String.test; public class StringTest_1 { public static void main(String[] args ...
hdu 2037
PS: - -原本想的是排序开始时间和消耗时间..后来想到可以排序结束时间..后来还wa了一次,因为排序的时候溢出了思路: 1 3 //13 4 //20 7 3 8 2 9 5 10 //36 ...
2016-1-9 Quartz框架的学习，剪裁图片并设置边框
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
Chapter 3: Connector(连接器)
一.概述 Tomcat或者称之为Catalina(开发名称),可以简化为两个主要的模块,如下图: 多个Connector关联一个Container.之所以需要多个Connector,是为了处理多种协议 ...
爬虫学习--使用百度api---天气
#coding:utf-8#version:0.1#note:该即用API能查询指定城市的空气质量指数,但城市数量有限,截止2015年3月26日,只能查到全国161个城市的. import urlli ...
黑马程序员——【Java基础】——多线程
---------- android培训.java培训.期待与您交流! ---------- 一.概述 (一)进程正在执行中的程序,每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控 ...
Map写入的顺序输出地顺序ZT
偶然间发现hashmap遍历的结果不是放入的顺序为了项目某个功能更人性话思考了半天还是不知道如何下手因为有种种条件限制后来无意中发现 java.util.LinkedHashMap< ...

knockoutJs基础1 - 简单的knockoutjs实现

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

随机推荐

热门专题