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. Java 的简单了解

    本文是主要根据百度百科以网上一些资料,整理的一点对Java的浅显的了解,不当之处,还请大家批评指正. 最初见到Java这个单词,是在以前的手机上,游戏启动时总会显示java的图标和名字,就感觉java ...

  2. ECSTORE2.0 定时任务配置

    今天在配置ecstore2.0的定时任务时候,发现ECOS后台每30秒通过JS调用 http://localhost/ecstore-bugfix/index.php/shopadmin/index. ...

  3. c++实现dll注入其它进程

    DLL注入技术才具有强大的功能和使用性,同时简单易用,因为DLL中可以实现复杂的功能和很多的技术. 技术要点: 1.宿主进程调用LoadLibrary,就可以完成DLL的远程注入.可以通过Create ...

  4. PHP开发环境设置

    步骤有三个: Apache 服务器安装.PHP 安装和让 Apache 支持 PHP 1. Apache 服务器的安装与配置 基于Windows操作系统支持的PHP开发的服务器有IIS和Apache, ...

  5. Spark运行问题备忘一（网络搜集）

    问题一 ERROR storage.DiskBlockObjectWriter: Uncaught exception -9ca8//shuffle_1_1562_27 java.io.FileNot ...

  6. vue访问原生 DOM 事件

    <body> <div id="test"> <button @click="changeColor('你好',$event)"& ...

  7. java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)

    首先声明,这篇文章是从网上粘贴过来的.原文地址是:http://www.cnblogs.com/wangaohui/archive/2012/11/28/2791999.html.感觉写的很好,所以粘 ...

  8. Altium Designer6打印PCB转印纸设置方法

    在学校经常要用热转印法做一些简单的PCB板,自己用的AD6.6,学校的打印店用99的比较多,这就造成打印不方便.为了充分利用自己实验室的打印机,今天买回来两张PCB打印纸.发现用AD6打印同比例的PC ...

  9. 2015.9.11模拟赛 codevs 4159【hzwer的迷の数列】

    题目描述 Description hzwer找了一个人畜无害的迷の数列…… 现在hzwer希望对这个数列进行一些操作,请你来回答hzwer的问题. 操作一:查询第i个数的大小 操作二:把第i个数的大小 ...

  10. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...