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
Knockout.js 组件的更多相关文章
- Knockout.js组件系统的详解之（一） - 组件的定义和注册
(Knockout版本:3.4.1 ) KO的组件主要从以下四个部分进行详细介绍: 1.组件的定义和注册 2.组件绑定 3.使用自定义元素 4.自定义组件加载器(高级) 目录结构 1.通过" ...
- 【Knockout.js 学习体验之旅】（3）模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】（2）花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 简述9种社交概念 SNS究竟用来干嘛？
1.QQ 必备型交流工具基本上每一个网民最少有一个QQ,QQ已经成为网民的标配,网络生活中已经离不开QQ了.虽然大家嘴上一直在骂 QQ这个不好,那个不对,但是很少有人能彻底离开QQ.QQ属于IM软件, ...
- jQuery的$.ajax
在介绍JSONP之前,先简单的介绍一些JSON.JSON是JavaScript Object Notation的缩写,是一种轻量的.可读的基于文本的数据交换开放标准.源于JavsScript编程语言中 ...
- 开始我的IT博客之旅
这是一个好的开始,过程很漫长,但我却乐在其中. 在大学之际,这是我的又一个开始,随便写点啦. 想把每一次的过程记录下来 这样以后对自己 对别人都会有所帮助. 好啦 作为一名大三的学生党 加油吧!
- 由提交storm项目jar包引发对jar的原理的探索
序:在开发storm项目时,提交项目jar包当把依赖的第三方jar包都打进去提交storm集群启动时报了发现多个同名的文件错误由此开始了一段对jar包的深刻理解之路. java.lang.Runtim ...
- [转载]windows 7 IIS 7.5 ASP.Net 文件上传大小限制
原文出处: 原文作者:云中岳 原文链接:http://www.cnblogs.com/netlover/archive/2011/07/08/Win7_IIS_Upload.html IS 7 默认文 ...
- window下的各种宽高度小结
详细的请打开这里看console.log window.innerWidth: 文档显示区(body)的宽度window.innerHeight 文档显示区(body)的高度window.outr ...
- 利用私有的API获得手机上所安装的所有应用信息（包括版本，名称，bundleID，类型）
MobileCoreService这个系统的库,里面有个私有的类LSApplicationWorkspace ,利用运行时可以获得私有类里面的方法,- (id)allInstalledApplicat ...
- 手机游戏渠道SDK接入工具项目分享（三）拨开云雾是个坑
一直在纠结是先写框架设计还是先写掉过的坑,最后本这娱乐大众的态度先写掉过的坑让大家乐呵下. 项目开发过程中遇问题无数,回顾下8个大坑照成了项目一定程度上延期甚至返工. 项目一开始几个人把现有3家主流的 ...
- 贝塞尔曲线（UIBezierPath）属性、方法汇总
UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...
- Atitit.android播放smb 网络邻居视频文件解决方案
Atitit.android播放smb 网络邻居视频文件解决方案 Android4.4 1.1. Android4视频播放器不能直接地支持smb协议..子好先转换成个http流 1.2. ES文件浏览 ...