Knockout.js 组件

Knockout.js是一个基于MVVM模式的轻量级的前端框架，有多轻？根据官网上面显示的最新版本v3.4.0，仅22kb。能够友好地处理数据模型和界面DOM的绑定，最重要的是，它的绑定是双向的，也就是说数据模型变化了，界面DOM上的数据也会跟着发生变化，反过来，界面DOM上的数据变化了，数据模型也会相应这个变化

Knockout.js官网：http://knockoutjs.com

Knockout.js开源地址：https://github.com/knockout/knockout

MVVM模式：这是一种创建用户界面的设计模式，MVVM把它拆分成三块就是Model、View、ViewModel，Model就是数据模型，View就是我们的视图，ViewModel就是一个视图模型，用来绑定数据模型和视图上面的dom元素。

 

实例

官网下载knockout.js文件，然后引用到view页面里面

<script src="~/scripts/knockout/knockout-3.4.0.js"></script>

 

完整案例

<!DOCTYPE html>
<html>  
<#include "../include.ftl">
<head>  
    <meta charset="utf-8">  
    <title>test</title>
    <script src="${basePath}/scripts/jquery/jquery-1.9.0.min.js"></script>
    <script src="${basePath}/scripts/knockout/knockout-3.4.0.js"></script>
</head> 
<body>
<div> 
　　　　<!-- view视图里面定义绑定data-bind的标签 ;注意：对应input标签的文本，需要使用textinput，而普通标签的文本使用text即可。-->
        From：<label data-bind="text:From"></label><br />
        To：<input type="text" data-bind="textinput:To" />
    </div>

</body>  
</html>  
<script type="text/javascript">
　　//定义一个viewmodel：Name，Profession标签与html元素标签区分大小写
    var myViewModel = {
            From: "去了",
            To: "来了",
        };
　　//需要激活knockout的绑定
    ko.applyBindings(myViewModel);
</script>

 

 

 

效果

ko.applyBindings()方法有两个参数，第一个就是我们需要绑定的viewmodel
第二个参数是一个可选参数，它表示viewmodel绑定的标签的作用域
ko.applyBindings(myViewModel,document.getElementById("ID"));

 

第二个参数限定了myViewModel的作用范围，也就是说，只有在id="lb_name"的标签上面绑定才会生效，如果第二个参数是div等容器标签，它表示该绑定的范围为该div下面的所有子标签。

 

 

 

 

其他详看：http://www.cnblogs.com/landeanfen/p/5400654.html

 

posted @ 2016-11-01 14:40  243573295  阅读(759)  评论(0)  编辑  收藏  举报