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 - 入门的更多相关文章

  1. Knockout应用开发指南 第一章:入门

    2011-11-21 14:20 by 汤姆大叔, 20165 阅读, 17 评论, 收藏,  编辑 1    Knockout简介 (Introduction) Knockout是一个轻量级的UI类 ...

  2. KnockOut.js入门示例详解

    KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架. KO的核心就是绑定,包括数据绑定和行为绑定: K ...

  3. knockout之入门介绍

    Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript的前端UI简单化.Knockout是一个以数据模型(data model)为基础的能够帮助你创建丰富文本,响应显示和编 ...

  4. Knockout JS 入门示例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  5. KnockOut -- 快速入门

    简单示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  6. 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 的目的是 ...

  7. 前端神器avalonJS入门(一)

    转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angula ...

  8. Knockout.js随手记(1)

    新的开始,knockout.js 1.首先去http://knockoutjs.com/index.html下载knockout.js,最新的版本是2.3 2.知道什么是Knockout?它是个Jav ...

  9. knockoutjs入门

    Knockoutjs入门 (概念相关)对于asp.net 后端开发人员来说我们几乎都接触过mvc框架.knockoutjs是MVVM模式对于我们来说有点陌生.Knockout是一个轻量级的UI类库,通 ...

随机推荐

  1. php中文匹配

    PHP判断字符串中是否含有中文 <? $str = "测试中文"; echo $str; echo "<hr>"; //if (preg_ma ...

  2. The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. (关于jdbc)

    The last packet sent successfully to the server was milliseconds ago. The driver has not received an ...

  3. C#中struct与class的区别详解

    转自:http://blog.csdn.net/justlovepro/archive/2007/11/02/1863734.aspx 有这么几点不同: 1.struct 是值类型,class是对象类 ...

  4. myEclipse8.* 手动安装ADT插件[转]

    Myeclipse8.6手动添加插件: 自动在线安装完ADT插件会导致myeclipse8.6中无法创建web项目以及其他项.解决方法是手动安装步骤如下: 首先安装好 MyEclipse 8.6. 1 ...

  5. Sicily shortest path in unweighted graph

    题目介绍: 输入一个无向图,指定一个顶点s开始bfs遍历,求出s到图中每个点的最短距离. 如果不存在s到t的路径,则记s到t的距离为-1.   Input 输入的第一行包含两个整数n和m,n是图的顶点 ...

  6. MCS-51单片机I/O端口的存取

    MCS-51单片机通常有4个8位I/O端口, 向各端口的写数据均写入到对应端口的锁存器中, 但对各端口的读操作却有两个方式:读锁存器和读引脚 1 读-修改-写操作    Pn(指P0,P1,P2,P3 ...

  7. 基于SQL_ID查看对象大小

    SQL> set echo off set echo off set verify off set serveroutput on set feedback off set lines 200 ...

  8. 设计模式(七):Adapter 适配器模式 -- 结构型模式

    1. 概述: 接口的改变,是一个需要程序员们必须(虽然很不情愿)接受和处理的普遍问题.程序提供者们修改他们的代码;系统库被修正;各种程序语言以及相关库的发展和进化.  例子1:iphone4,你即可以 ...

  9. 【转】s3c2440 按键驱动 — 字符设备

    原文网址:http://www.xuebuyuan.com/632893.html 主机:VM - redhat 9.0 开发板:FL2440,linux-2.6.12 arm-linux-gcc:3 ...

  10. Edit Distance 解答

    Question Given two words word1 and word2, find the minimum number of steps required to convert word1 ...