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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- python征程3.1（列表，迭代，函数，dic，set，的简单应用）
1.列表的切片. 1.对list进行切片.'''name=["wangshuai","wangchuan","wangjingliang", ...
- 运算符.png
- 原型设计Axure的基本使用
Axure是一款专业的原型设计工具, 让负责定义需求设计:功能和界面的人员能快速设计出所需产品,其中不仅包含了对软件产品的界面,交互逻辑的原型设计,还包含了流程图:web网站的线框图,并且能导出说明文 ...
- dubbo连接zookeeper注册中心因为断网导致线程无限等待问题【转】
最近维护的系统切换了网络环境,由联通换成了电信网络,因为某些过滤规则导致系统连不上zookeeper服务器(应用系统机器在深圳,网络为电信线路,zookeeper服务器在北京,网络为联通线路),因为我 ...
- Oracle数据库的链接数目超标
测试场景:Oracle数据库的链接数目超标,iServer是否自动连接. 测试步骤:(1)设置了最大连接数为85,oracle后台进程有83:(2)开启3台iserver(A,B,C)A,B发布tes ...
- 解决NSTimer存在的内存泄漏的问题
创建定时器会在一定的间隔后执行某些操作,一般大家会这样创建定时器,这样创建的定时,self对定时器有个引用,定时器对self也有个引用,造成了循环引用,最终造成了内存泄漏,如果定时器在做下载的操作就会 ...
- 使用ViewPager切换Fragment时，防止频繁调用OnCreatView
使用ViewPager切换Fragment,我原先使用系统自带的适配器FragmentPagerAdapter. 切换fragment时,频繁调用oncreatview(). 查看FragmentPa ...
- Git使用详细教程（一）
很久不发博客,最近有兴趣想写点东西,但 Live Writer 不支持从Word复制图片,疯狂吐槽下 Git使用详细教程(一) Git使用详细教程(二) 该教程主要是Git与IntelliJ IDEA ...
- WinSetupFromUSB - 制作多系统U盘安装All-In-One的利器
单U盘玩多个操作系统,这下有福了! 官网最新的下载地址:http://www.winsetupfromusb.com/files/download-info/winsetupfromusb-1-7-e ...
- （八）map，filter，flatMap算子-Java&Python版Spark
map,filter,flatMap算子 视频教程: 1.优酷 2.YouTube 1.map map是将源JavaRDD的一个一个元素的传入call方法,并经过算法后一个一个的返回从而生成一个新的J ...