首页 > 其他 > 详细

前端MVVM学习之KnockOut(二)

时间:2014-01-15 20:18:12      阅读:444      评论:0      收藏:0      [点我收藏+]

 

现在开始学习Knockout并且做个简单的例子。

Knockout是建立在以下三个核心功能之上的:

1、Observables and dependency tracking(属性监控与依赖跟踪)

2、Declarative bindings(声明式绑定)

3、Templating(模板机制)

创建一个ViewModel

 var myViewModel = {
        personName: ko.observable(张三),
        personAge: ko.observable(12)
    };

将属性绑定到View

<div>
         <span data-bind="text: personName"></span>
    </div>

将ViewModel一般应用到View中

$(function() {
        ko.applyBindings(myViewModel);
    });

最后源码如下:  

bubuko.com,布布扣
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Knockout学习一</title>
    <script src="Scripts/knockout-3.0.0.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
   
    <div>
         <span data-bind="text: personName"></span>
    </div>
 
</body>
<script type="text/javascript">
    var myViewModel = {
        personName: ko.observable(张三),
        personAge: ko.observable(12)
    };

    $(function() {
        ko.applyBindings(myViewModel);
    });
    
</script>
</html>
bubuko.com,布布扣

前端将会显示出张三,其中我们为属性设定了Observables属性,即属性监控,这样personName数据若有变化,则会自动更新到View中,实现了数据的双向绑定。
applyBindings也可以有两个参数:ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘)) 后一个参数是可选的,表示一个标签的id,若设置了该参数,则表示myViewModel只作用于该标签内的View,通过该参数,可以使一个页面对应多个ViewModel。

简单的knockout例子就到这里。

前端MVVM学习之KnockOut(二)

原文:http://www.cnblogs.com/bravenet/p/3515415.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!