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. JavaScript 禁用键盘按钮

    代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅. $(document).keydown(function () { if (window.event ...

  2. UIScrollView 滚动停止的时候一次调用此方法

    //拖动返回选中的索引 当滚动视图停止时的时候 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ CGFloat wid ...

  3. Remoting通讯实例

    Remoting通讯可以实现不同应用程序域之间的通信(可以为一台机器不同程序,也可以不同机器上的不同程序) 实例步骤: (1)编写透明代理类 新建一个类库,命名空间:MyRemoting 在该类库中建 ...

  4. liunx运维面试题汇总二

    一．填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 来标识 ...

  5. [资料] Apache2 的 httpd.conf 经典中文翻译

    [i=s] 本帖最后由 www.PHP888.com 于 2009-5-22 13:40 编辑 [/i] # 基于 NCSA 服务的配置文件. # #这是Apache服务器主要配置文件. #它包含服务 ...

  6. empty()方法

    empty()可以用来检查一个变量是否被声明或者值为false,通常被用来检查一个表单变量是否被发送或者包含数据. 例如一个登录表单: <?php if(!empty($_POST['uname ...

  7. VS2013中使用GDI+绘图

    VC范例,400多个例子源代码下载 http://download.csdn.net/detail/bigtree_mfc/7727977 VS2013中使用GDI+绘图和VC6.0不同,在VC6.0 ...

  8. Android 自定义属性（attrs.xml，TypedArray）

    做Android布局是件很享受的事,这得益于他良好的xml方式.使用xml可以快速有效的为软件定义界面.可是有时候我们总感觉官方定义的一些基本组 件不够用,自定义组件就不可避免了.那么如何才能做到像官 ...

  9. 总结:man, info, hwclock, cal, type, which, dirname, basename, who, which, whatis, makewhatis, hash, tty

    man, info, help, date, hwclock, cal, shutdown, reboot, halt, poweroff, type, cd, which, dirname, bas ...

  10. cocos2d-x 几何绘制： DrawingPrimitives 和 CCDrawNode

    在看书的时候只提到了DrawingPrimitives,然后我去搜索这个类,结果没搜到.心想难道是类名改了,那我搜方法名吧,搜了下DrawLine,果然被我搜到了.结果发现原来这些各方法都是全局函数, ...