[转]Knockoutjs快速入门

本文转自:http://www.cnblogs.com/yinzixin/archive/2012/12/21/2827356.html

Knockoutjs是一个JavaScript实现的MVVM框架。主要有如下几个功能:

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

  1. 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用。闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定。
  2. 1. 基本绑定和依赖跟踪

首先需要定义一个ViewModel:

<script type="text/javascript">
    function ViewModel() {
        this.firstName = "Zixin";
        this.lastName = "Yin";
    }
</script>

然后是一个用来显示这个ViewModel的View:

<div>
    <p data-bind="text: firstName"></p>
    <p data-bind="text: firstName"></p>
    <input data-bind="value: firstName"/>
    <input data-bind="value: lastName"/>
</div>

从这个view中可以看到声明式绑定的含义,只需要在标签上使用data-bind属性,就可以将数据的值绑定到相应的地方。有了View和ViewModel还需要代码将这两者关联起来:

    ko.applyBindings(new ViewModel());

将他们放到一起,注意,applyBinding那代码必须在页面全部加载完之后执行。页面显示为:

下面再看observables,这个功能不是与生俱来的,必须要把View Model设置为observable,方法如下:

function ViewModel() {
        this.firstName = ko.observable("Zixin");
        this.lastName = ko.observable("Yin");
    }

其他都不需要改变,这时候,如果改变输入框中的值,当焦点离开的时候,可以发现p中的值也跟着改变了:

下面再看dependency tracking,也就是如果一个值依赖多各值,其中任何一个值发生变化,它都会自动发生变化. 这是通过computed方法实现的,代码如下:

function ViewModel() {
        this.firstName = ko.observable("Zixin");
        this.lastName = ko.observable("Yin");
        this.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); },this);
    } 

注意获得一个observable的值是一个函数调用。这样当first 或者last name发生变更的时候fullName也会自动跟着变更。

也可以通过代码改变observable的值,页面会自动刷新:

function ViewModel() {
        //………
        this.capitalizeLastName = function () {
            this.lastName(this.lastName().toUpperCase());
        }
    } 

在页面上添加一个按钮:

<button data-bind="click: capitalizeLastName">Caps</button>

点击按钮之后便会出发viewmodel的capitalizeLastName方法,要改变一个observable的值的方法就是将新值作为函数调用的参数。点击之后:

2. 列表绑定

加入我们有如下的订单ViewModel,使用observableArray来跟踪数组的变化。

var products=[{name:"Thinkpad X1",price:9000},
                  {name:"Hp ProBook",price:5555},
                   {name:"Mouse",price:45} ];

    function Order() {
        var self = this;
        self.items = ko.observableArray([
            //This data should load from server
            new Item(products[0], 1),
            new Item(products[1],2)]);
        self.price = ko.computed(function () {
            var p=0;
            for (var i = 0; i < self.items().length; i++) {
                var item = self.items()[i];
                p += item.product.price * item.amount();
            }
            return p;
        }, self);
    }

Order里面的Item实际上应该是从服务器获得的,Item定义如下:

function Item(product, amount) {
        var self = this;
        this.product = product;
        this.amount = ko.observable(amount);
        this.subTotal = ko.computed(function () {
            return self.amount() * self.product.price;
        }, self);
    }

ViewModel准备好之后,就可以实现View。这次需要使用foreach绑定,如下:

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Amount</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: product.name"></td>
            <td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
            <td data-bind="text: subTotal"></td>
        </tr>
    </tbody>
</table>
<h3>Order Price:<span data-bind="text: price"></span></h3>

这样一个基本的订单页面就好了,能够选择数量,价格会自动更新:

下面给订单加上增删产品的功能,先给Order加上如下的方法:

function Order() {
        //……
        self.remove = function (item) {
            self.items.remove(item);
        }

        self.addMouse = function () {
            self.items.push(new Item(products[2],1));
        }
    }

给表格加上一列删除按钮:

<td><a href="#" data-bind="click: $root.remove">Remove</a></td>

再在表格底部加上一个增加产品的按钮:

<button data-bind="click: addMouse">Add a Mouse</button>

这时候,observableArray的功能就体现了,当你点击删除按钮或者底部的按钮的时候,页面节点会跟着变化,而不需要手动更新DOM节点,这使得前端的JS大大简化。

[转]Knockoutjs快速入门

时间: 2024-10-06 03:47:09

[转]Knockoutjs快速入门的相关文章

Knockoutjs快速入门(经典)

Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定. 1.基本绑定和依赖跟踪 首先需要定义一个ViewModel: 复制代码 代码如下: <script type=

快速入门系列--WebAPI--03框架你值得拥有

接下来进入的是俺在ASP.NET学习中最重要的WebAPI部分,在现在流行的互联网场景下,WebAPI可以和HTML5.单页应用程序SPA等技术和理念很好的结合在一起.所谓ASP.NET WebAPI,其核心概念就是构建REST风格的Web服务,把一起数据视为资源,无论是服务请求或者是数据操作,与以前的SOAP和XML-RPC架构风格有很大不同.说道这,很多读者可能想到WCF中不是早都有了REST风格的服务么,为什么还需要这个WebAPI?确实如此,不过WCF中的该类型服务显得比较复杂,因为其通

笔记:Spring Cloud Zuul 快速入门

Spring Cloud Zuul 实现了路由规则与实例的维护问题,通过 Spring Cloud Eureka 进行整合,将自身注册为 Eureka 服务治理下的应用,同时从 Eureka 中获取了所有其他微服务的实例信息,这样的设计非常巧妙的将服务治理体系中维护的实例信息利用起来,使得维护服务实例的工作交给了服务治理框架自动完成,而对路由规则的维护,默认会将通过以服务名作为 ContextPath 的方式来创建路由映射,也可以做一些特别的配置,对于签名校验.登录校验等在微服务架构中的冗余问题

javaweb-html快速入门

本文主要是进行HTML简单介绍(详细的属性查帮助文档就行了,这里主要为快速入门,赶时间,在最短的时间中看明白一个html文件的代码(如果能称之为代码的话)详细的样式表,布局啥的有时间再研究吧) HTML 1.html的简介 1.1,html的全称:HyperText Mark-up Language ,超文本标记型语言,是网页的语言. 超文本:比文本更加强大(后面还会讲到XML,可扩展标记性语言) 标记:就是标签,html所有操作都是通过标签直接或间接的操作(把需要操作的数据通过标签封装起来)

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话 安装Python 从http://www.python.org/downloads/ 下载安装程序 安装完后,再添加到环境变量. 安装Oracle JDK 下载页面: http://www.oracle.com/technetwork/java/javase/downloads/ 选择要下载的Java版本(推荐Java 7). 选择一个JDK下载并接受许可协议. 一旦下载,运行安装程序. 安装Ant Ant:下载http

bash编程快速入门

首先,我们简单的介绍一下bash,bash是GNU计划编写的Unixshell,它是许多Linux平台上的内定shell,它提供了用户与系统的很好的交互,对于系统运维人员,bash的地位是举足轻重的,bash编程能很快处理日常的任务 bash入门,一个最简单的bash例子 #vim hello.sh #!/bin/bash #This is the first example of the bash #echo "Hello world" 下面,我们就这个简单的bash 脚本来介绍一下

定时器(Quartz)快速入门

Quartz概述 Quartz中的触发器 Quartz中提供了两种触发器,分别是CronTrigger和SimpleTrigger. SimpleTrigger 每 隔若干毫秒来触发纳入进度的任务.因此,对于夏令时来说,根本不需要做任何特殊的处理来"保持进度".它只是简单地保持每隔若干毫秒来触发一次,无论你的 SimpleTrigger每隔10秒触发一次还是每隔15分钟触发一次,还是每隔24小时触发一次. CronTrigger 在特定"格林日历"时刻触发纳入进程的

vue.js--60分钟快速入门

Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM

Netty5快速入门及实例视频教程(整合Spring)

Netty5快速入门及实例视频教程+源码(整合Spring) https://pan.baidu.com/s/1pL8qF0J 01.传统的Socket分析02.NIO的代码分析03.对于NIO的一些疑惑04.Netty服务端HelloWorld入门05.Netty服务端入门补充06.Netty客户端入门07.如何构建一个多线程NIO系统08.Netty源码分析一09.Netty源码分析二10.Netty5服务端入门案例11.Netty5客户端入门案例12.单客户端多连接程序13.Netty学习