knockoutJs基础1

简单的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>