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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 在MongoDB的MapReduce上踩过的坑
太久没动这里,目前人生处于一个新的开始.这次博客的内容很久前就想更新上来,但是一直没找到合适的时间点(哈哈,其实就是懒),主要内容集中在使用Mongodb时的一些隐蔽的MapReduce问题: 1.R ...
- Maven实战系列文章
1.Maven命令行使用:mvn clean compile(编译) 2.Maven命令行使用:mvn clean package(打包) 3.Maven命令行使用:mvn clean install ...
- Java输入输出常用类Scanner
Scaner类,使用获取键盘输入. public boolean DemoTest(){ Scanner input = new Scanner(System.in); System.out.prin ...
- Exploitation with Social Engineering Toolkit SET
下面演示如何使用S.E.T工具创建Payload并配置Armitage实现目标主机自动上线. 打开S.E.T工具选择第一项,进行Attacks配置. 选择4创建一个Payload和Listener. ...
- 在xampp中配置dvwa
DVWA主要是用于学习Web的常见攻击,比如SQL注入.XSS等的一个渗透测试系统,下面我将结合XAMPP来说明它的安装过程. 一.环境 OS:Windows 10 XAMPP:5.6.24 DVWA ...
- git+coding.net记录篇
很久没用了,有些配置快忘记了,记录下来,以供以后参考回忆 首先下载好git插件,然后在as上面设置好本地项目地址 设置好git,点击test测试通过 然后把项目添加到git本地库 你会看到你项目里的文 ...
- [转]ThoughtWorks(中国)程序员读书雷达
http://agiledon.github.io/blog/2013/04/17/thoughtworks-developer-reading-radar/#rd?sukey=f64bfa68330 ...
- windows 7 + virtualbox安装centos+mono+jexus
1. 下载安装virtualbox和virtualbox extension 2. 创建并安装centos虚拟机 3. 下载并安装libgdiplus,gdi+库 4. 下载并安装Mono 5. 下载 ...
- Android 手机卫士--导航界面1的布局编写
本文地址:http://www.cnblogs.com/wuyudong/p/5943005.html,转载请注明出处. 本文实现导航界面1的布局的实现,效果如下图所示: 首先分析所使用的布局样式: ...
- Android开发案例 - 图库
本文不涉及UI方面的内容, 如果您是希望了解UI方面的访客, 请跳过此文. 本文将要详细介绍如何实现流畅加载本地图库. 像平时用得比较多应用, 如微信(见下图), 微博等应用, 都实现了图库功能, 其 ...