knockoutjs的MVVM机制

强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan

KnockOutJs是前端的一项技术，主要的机制是MVVM机制，所以支持双向绑定，在开发中简单了不少，他还有一些自己的特性，将在下边的小Demo中给出记录。

MVVM（即Model-View-ViewModel）,开始一直不理解这三部分分别对应的是什么，直到我看到一张图才恍然大悟。View就是用来给用户展示的，即用户可以看得到的页面HTML，ViewModel将会在下边的Demo中给出解释，先简单的解释是：我们在绑定的时候需要先声明observables，相当于一个对象，存的是需要绑定到页面上的内容。Model就是我们的后台处理了。

首先我的Demo目录结构如下：

第一个展示MVVM的Demo：

<!DOCTYPE html>
<html>
<head><title>myFirstDemo</title><meta charset="utf-8" /><script type="text/javascript" src="../build/jquery-1.8.2.min.js"></script><script type="text/javascript" src='../build/knockout-3.4.1.js'></script></head>
<body><!--静态绑定--><div class='liveExample'><p>First name: <input data-bind='value: firstName' /></p><p>Last name: <input data-bind='value: lastName' /></p><h2>Hello, <span data-bind='text: fullName'> </span>!</h2></div><script>// 定义一个ViewModelvar ViewModel = function (first, last) {this.firstName = ko.observable(first);this.lastName = ko.observable(last);this.fullName = ko.computed(function () {// 根据firstName和lastNamecomputed出fullNamereturn this.firstName() + " " + this.lastName();}, this);};//knockout调用applybindings激活ViewModel，即，使得ViewModel与上述div中的静态绑定联系起来ko.applyBindings(new ViewModel("zhang", "zhang")); // This makes Knockout get to work</script>
</body>
</html>

效果图展示，下边展示的内容会根据input框中的内容变化而变化，对应着代码来讲，html页就是MVVM中的View，声明的ViewModel对应的是MVVM中的ViewModel，Model对应的是进行的处理，例如上边的this.fullName对应的function：

栗子就不一一举了，如果需要，可以联系我，我们共同探讨。

knockoutjs的MVVM机制相关推荐

extjs6 mvvm_ZK 6中的MVVM初探
extjs6 mvvm MVVM与MVC 在上一篇文章中,我们已经看到Ajax框架ZK如何采用CSS选择器启发的Controller来在View中连接UI组件并监听它们的事件. 在此ZK MVC模式下 ...
ZK 6中的MVVM初探
MVVM与MVC 在上一篇文章中,我们已经看到Ajax框架ZK如何采用CSS选择器启发的Controller来在View中连接UI组件并监听它们的事件. 在此ZK MVC模式下, View中的UI组件 ...
knockoutJs在项目中的使用
最早接触到knockoutJs应该是2017年初了.彼时只是了解了一下大概信息,写了一些简单的例子,没有怎么实际使用过.现在有机会再项目中实战一下,记录一下. 1.项目架构前端:bootstrap和 ...
分享一个前后端分离的轻量级内容管理框架
开发框架要考虑的面太多了:安全.稳定.性能.效率.扩展.整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作.网上很多开源的框架,为何还要自己开发?我是基于以下两点: 没找到合适的: ...
直播聊天室的无限用户优化实践（六千字技术文）
融云近期推出直播 SDK,两步即可实现视频直播能力.在第二步"开始直播"阶段,调用一个接口就能发布视频流,其他用户便可加入房间观看直播并在公屏发送弹幕与主播互动.移步[融云全球互联 ...
Web API 入门指南
Web API是一个比较宽泛的概念.这里我们提到Web API特指ASP.NET Web API. 这篇文章中我们主要介绍Web API的主要功能以及与其他同类型框架的对比,最后通过一些相对复杂的实例 ...
Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
javaFX学习之TreeView组件(转载)
转载:http://www.javafxchina.net/blog/2015/04/doc03_treeview/ javaFX应用程序中如何构建树形结构,如何向树视图中增加项.处理事件.通过实现和 ...
介绍一项让 React 可以与 Vue 抗衡的技术
好吧,我承认我是标题党.React 明明如日中天,把它与 Vue 倒过来,给 Vue 加点东西或可与 React 抗衡.不过,这两年 Vue 干的正是这事,不断加东西,不断优化,按它现有发展速度超越 ...

knockoutjs的MVVM机制

knockoutjs的MVVM机制相关推荐

最新文章

热门文章