(一)Knockout - 入门
knockout 简介
knockoutjs的实现依照[MVVM模式],Model-View-ViewModel。
Model,用来聚合server端数据
ViewModel,描述的数据以及操作,是行为的抽象
View,UI层面的状态显示
因此,KO的大致使用思想是:View就是你带有绑定信息的HTML文档,用ViewModel管理这些声明绑定,当任何数据请求返回或者数据变化时,ViewModel启动工作并更新View,开发时只需要着重关注与ViewModel
Demo
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>KO 入门</title>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
</head>
<body>
输入值:<input type="text" id="txtValue" data-bind="value: myValue" /><br/>
响应文本:<span id="spnValue" data-bind="text: myValue"></span>
<script type="text/javascript">
var myViewModel = {
myValue: ko.observable("walker")
}
ko.applyBindings(myViewModel);
</script>
</body>
</html>
解析:
1.定义了一个 myViewModel组件对象(包含一个myValue的属性)。
2.通过data-bind="value: myValue"将myValue属性绑到<input>的value值。
3.通过data-bind="text: myValue"将属性值动态的反映到<span>中。
(一)Knockout - 入门的更多相关文章
- Knockout应用开发指南 第一章:入门
2011-11-21 14:20 by 汤姆大叔, 20165 阅读, 17 评论, 收藏, 编辑 1 Knockout简介 (Introduction) Knockout是一个轻量级的UI类 ...
- KnockOut.js入门示例详解
KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架. KO的核心就是绑定,包括数据绑定和行为绑定: K ...
- knockout之入门介绍
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript的前端UI简单化.Knockout是一个以数据模型(data model)为基础的能够帮助你创建丰富文本,响应显示和编 ...
- Knockout JS 入门示例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- KnockOut -- 快速入门
简单示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...
- 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 的目的是 ...
- 前端神器avalonJS入门(一)
转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angula ...
- Knockout.js随手记(1)
新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...
- knockoutjs入门
Knockoutjs入门 (概念相关)对于asp.net 后端开发人员来说我们几乎都接触过mvc框架.knockoutjs是MVVM模式对于我们来说有点陌生.Knockout是一个轻量级的UI类库,通 ...
随机推荐
- Nginx源码研究三:Epoll在NGINX中的使用
Web服务器在面对高并发的情况下,网络的IO一般选择IO复用,像apache选择的Select/poll.Nginx在linux 2.6后选择Epoll做网路IO,提高了WEB服务的并发能力. 在本章 ...
- Matlab与外部接口:MAT文件基础
MAT 文件MAT文件是MATLAB使用的一种特有的二进制数据文件.MAT文件可以包含一个或者多个MATLAB 变量.MATLAB通常采用MAT文件把工作空间的变量存储在磁盘里,在MAT文件中不仅保存 ...
- keil #pragma disable
μVision2 控制:这条命令不能在命令行使用,只能在源文件中使用. 功能:DISABLE 指令使得编译器在函数运行期间禁止所有中断产生.DISABLE命令必须在函数的前面以#pragma 参数的形 ...
- 人工神经网络简介和单层网络实现AND运算--AForge.NET框架的使用(五)
原文:人工神经网络简介和单层网络实现AND运算--AForge.NET框架的使用(五) 前面4篇文章说的是模糊系统,它不同于传统的值逻辑,理论基础是模糊数学,所以有些朋友看着有点迷糊,如果有兴趣建议参 ...
- 神舟飞船上的计算机使用什么操作系统,为什么是自研发不是 Linux?
中国航天用的SpaceOS主要内容是仿造美国风河系统公司的VxWorks653(653是产品名,并非版本号). 先解释为什么用这个系统不用Linux: 航天器的内存和CPU都非常弱,弱到什么程度呢:天 ...
- xcode安装
Xcode5.1默认不支持iOS5版本的模拟器开发调试,在OS X Mavericks(10.9.x)下默认只能支持iOS6.1及以上版本的模拟器,在OS X Mountain Lion(10.8.x ...
- RenderBody, RenderPage and RenderSection methods in MVC 3
原文地址:http://www.codeproject.com/Articles/383145/RenderBody-RenderPage-and-RenderSection-methods-in R ...
- DPDK2.1开发者手册3-4
环境抽象层EAL 环境抽象层的任务对访问底层资源例如硬件和内存提供入口.它提供了隐藏应用和库的特殊性性的通用接口.它的责任是初始化分配资源(内存,pci设备,定时器,控制台等等). EAL提供的典型服 ...
- PHP中数组转换为XML格式
最近公司要做一个API接口,输出格式要有JSON与XML格式, 在PHP中,输入JSON直接json_encode就可以,但输出XML没有提供函数,于是决定自己写一个. <?php /** * ...
- 认识v$fixed_view_definition
认识v$fixed_view_definition v$fixed_view_definition 这个视图功能很强,可以将一些视图的数据来源(视图的定义)给找出来.直接举例: 1.v$sessi ...