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 基于phpexcel制作的导出excel类

    最近要写个项目,由于项目中导出excel太多,因此写个类便于使用. <?php /**如果是gbk的编码,请转为UTF8 *@使用方法. *引入类库. * $excel = news excel ...

  2. ServletContext对象的应用

    由于一个WEB应用中的所有Servlet共享同一个ServletContext对象,因此Servlet对象之间可以通过ServletContext对象来实现通讯.ServletContext对象通常也 ...

  3. NET Core & VS Code 之路(2) Web API

    NET Core & VS Code 之路(2) Web API 开发Core项目的条件 Visual Studio 2015 Update 3 .NET Core 1.0.0 - VS 20 ...

  4. [kuangbin带你飞]专题十 匹配问题 二分图最大权匹配

    二分图最大权匹配有km算法和网络流算法 km算法模板默认解决最大权匹配的问题 而使用最小费用最大流 是解决最小权匹配问题 这两种办法都可以求最大最小权 需要两次取反 TAT 感觉讲km会很难的样子.. ...

  5. Cisco C2900XL

    http://docstore.mik.ua/univercd/cc/td/doc/product/lan/c2900xl/c2900sa4/sa4cr/macintr.htm#xtocid10160 ...

  6. 使用MapReduce将HDFS数据导入到HBase（二）

    package com.bank.service; import org.apache.hadoop.conf.Configuration;import org.apache.hadoop.conf. ...

  7. hdu4111 Alice and Bob

    Alice and Bob Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. 【实验 1-1】编写一个简单的 TCP 服务器和 TCP 客户端程序。程序均为控制台程序窗口。

    在新建的 C++源文件中编写如下代码. 1.TCP 服务器端#include<winsock2.h> //包含头文件#include<stdio.h>#include<w ...

  9. Ubuntu 12.04 搭建Android开发环境

    Ubuntu 12.04 搭建Android开发环境 2013/7/29 Linux环境下搭建Android开发环境 大部分开发人员可能都在Windows下做开发,可能是感觉在Windows下比较方便 ...

  10. 10、Cocos2dx 3.0游戏开发找小三之容器篇：Vector、Map、Value

    重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27705613 容器 3.0版本号之前Cocos2d- ...