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. python之socket编程

    本章内容 1.socket 2.IO多路复用 3.socketserver Socket socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,对于文件用[打开][读写][ ...

  2. recovery编译汉化

    当BoardConfig.mk中定义了recovery的字体且为中文字体时,自动编译为中文版,否则编译为英文版 例如: BOARD_USE_CUSTOM_RECOVERY_FONT := \" ...

  3. 从汇编来看c语言之指针

    一.基础研究 将下面的程序编译连接,用debug加载: 首先执行第一条语句: 发现p=(unsigned char *)0x1000;在这里是把1000赋给一个偏移地址为01af.大小为两字节的内存空 ...

  4. weblogic使用脚本部署

    --本机 (/common/bin/wlst.sh (2)connect('weblogic','weblogic1','t3://localhost:7001') (3)progress=deplo ...

  5. 【转】【Android UI设计与开发】之详解ActionBar的使用，androidactionbar

    原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...

  6. 抛出异常的区别 throw 和throw ex

    在面试的过程中提到了异常捕获的的几种用法,之前一直使用但是没有仔细留意,调试程序的过程中发现还是有区别的,主要区别在堆栈信息的起始点不同,下边我们通过实例来看这集中不同的抛出异常的方法. 一般我们推荐 ...

  7. codevs1906 最长递增子序列问题

    题目描述 Description 给定正整数序列x1,..... , xn  .(1)计算其最长递增子序列的长度s.(2)计算从给定的序列中最多可取出多少个长度为s的递增子序列.(3)如果允许在取出的 ...

  8. POJ_2488——骑士遍历棋盘,字典序走法

    Description Background The knight is getting bored of seeing the same black and white squares again ...

  9. linux0.12 学习总序（不断更新状态中）

    最近有空闲时间,想静下心来学点东西.一直对kernel有兴趣,又苦于无从下手,就拿linux0.12练手.尝试了解并熟悉kernel各模块工作原理. 接下来的博客主要用来记录自己所遇到的问题和解决的方 ...

  10. IIS7.0 Windows Server 2008 R2 下配置证书服务器和HTTPS方式访问网站

    配置环境 Windows版本:Windows Server 2008 R2 Enterprise Service Pack 1 系统类型: 64 位操作系统 了解HTTPS 为什么需要 HTTPS ? ...