前端MVVM学习之KnockOut(二)

时间:2021-06-11 09:05:12

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

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

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

2、Declarative bindings(声明式绑定)

3、Templating(模板机制)

创建一个ViewModel

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

将属性绑定到View

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

将ViewModel一般应用到View中

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

最后源码如下:  

<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()
}; $(function() {
ko.applyBindings(myViewModel);
}); </script>
</html>

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

简单的knockout例子就到这里。

前端MVVM学习之KnockOut(二)的更多相关文章

  1. 前端MVVM学习之KnockOut&lpar;一&rpar;

    MVVM理解 MVVM即Model-View-viewModel,是微软WPF和MVP(Model-View-Presenter)结合发展演变过来的一种新型架构框架. MVVM设计模式有以下优点: ( ...

  2. 前端MVVM框架:Knockout&period;JS(一)

    前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...

  3. 前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  4. 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  5. Web前端开发学习笔记(二)

    Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...

  6. js架构设计模式——前端MVVM框架设计及实现(二)

    前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...

  7. 前端MVVM框架设计及实现(二)

    在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...

  8. Yii框架学习笔记(二)将html前端模板整合到框架中

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

  9. 2&period;VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

随机推荐

  1. EL表达式杂项

    1.<%@ page isELIgnored="false" %> 是否忽略EL表达式,如果值为ture,那么  ${..}这样的会直接原样输出,不会进行EL表达式计算 ...

  2. ffmpeg-20160926&lbrack;27&rsqb;-bin&period;7z

    ffplay 2016.09.26 开始使用 SDL 2.x , CPU 利用率比 SDL 1.x 略微好一些. ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 ...

  3. Listview 隐藏item

    隐藏某一项item(防止list改变后导致复用convertview而错乱--如果删掉list中的该项,会导致复用convertview混乱) 方法: convertView.setVisibilit ...

  4. phpstorm 激活

    http://idea.lanyus.com/

  5. php session的存放目录&comma;再次回顾

    session的存放位置可以通过运行时配置ini_set和函数session_save_path来设置 .session_save_path - 读取/设置当前会话的保存路径 string sessi ...

  6. linux&colon; 获取监听指定端口的进程PID

    在 linux 下经常需要杀死(重启)监听某端口的进程, 因此就写了一个小脚本, 通过 ss 命令获取监听制定端口的进程 PID, 然后通过 kill 命令结束掉进程: #!/bin/sh # set ...

  7. 源码编译Chrome

    官网描述 http://www.chromium.org/developers/how-tos/build-instructions-windows 为啥还要写这篇博客 太久没在这里写博客 Chrom ...

  8. Scala学习笔记--Akka

    待完成 http://www.gtan.com/akka_doc/ http://my.oschina.net/mingdong/blog/297972 http://www.jdon.com/con ...

  9. jq判断元素是否显示

    为了判断元素是否显示,jquery中用is()来实现, $(function(){ $(obj).bind('click',function(){ if(obj.is(:visible)){ //编写 ...

  10. H5在线编辑器优化总结

    花了三个半月做了个编辑器.自己一个人写写CSS,搞搞html,弄下JS,大部分精力都是掏鼓js,时间很仓促,后面领导帮忙写了四个页面逻辑(音频,图片,视频). 很多能优化的,以此文章记录要已经优化和未 ...