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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- Spring学习系列(一) Spring简介
Spring简介 之前一直想写点东西,可一直没有开始实施,各种原因都有,最大原因可能还是自己太懒了,嘿嘿.最近在看Spring in action这本书,为了能让自己坚持下去把书看完,这次决定同步的在 ...
- Mysql性能优化三（分表、增量备份、还原）
接上篇Mysql性能优化二 对表进行水平划分 如果一个表的记录数太多了,比如上千万条,而且需要经常检索,那么我们就有必要化整为零了.如果我拆成100个表,那么每个表只有10万条记录.当然这需要数据在逻 ...
- 建造者模式组装mybatis参数Example（）
参考:github, https://github.com/liuxiaochen0625/MyBatis-Spring-Boot-master.git 从controller组装tk.mybat ...
- 【JS基础】DOM操作
appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值
- Drupal 8.2.4安装简体中文步骤
安装的时候发现很多情况下会出现各种问题,现在写下自己安装成功的步骤: 1.首先官网下载zip安装包drupal-8.2.4.zip 2.下载官方提供的8.2.4简体中文语言包drupal-8.2.4. ...
- H3 BPM初次安装常见错误详解5-7
错误5:登陆无反应,F12查看后台网络请求错误如下图所示 错误原因:ISAPI未对相应的.net版本允许. 解决方法:IIS的根节点--右侧"ISAPI和CGI限制"打开--将相 ...
- 用Android Studio开发最常用到的快捷键
Android Studio常用快捷键 Android Studio日常开发常用快捷键. 快捷键版本: Mac OS X 10.5+ 搜索查看类 用途 Mac快捷键 搜索所有文件 double Shi ...
- React Native之ListView使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- iOS开发常用快捷键
二. Xcode基本快捷键 新建项目 Shift + CMD + N 项目中新建文件 CMD + N 运行 CMD + R 编译 CMD + B 停止运行 CMD + . 清除缓存 Shift + C ...
- 关于JS交互--调用h5页面，点击页面的按钮，分享到微信朋友圈，好友
关于js交互,在iOS中自然就想到了调用代理方法 另外就是下面的,直接上代码了: 如果你的后台需要知道你的分享结果,那么,就在回调里面调用上传到服务器结果的请求即可