avalon对交互非常复杂的WEB应用具有天然的优势,它拥有两大神器:计算属性(这相当于后端WPF的DependencyProperty)与$watch回调。 我们的订餐系统的要求如下,它有一个总额统计,会在用户添加删除座位时重新计算它,并且与我们火车的座位一样,是分不同的档次,软卧肯定比软座贵,软座比硬座贵。我们需要使用一个数组来储存所有的座位,循环它们使用ms-each,而座位类型与价格成一一对照关系,这种结构使用哈希最合适,在JS中它的对象就是自带的哈希,循环它们使用ms-with。如何监听它们变动呢?座位数的变动我们可以监听它的长度,从而调用对应的回调。而选择座位类型时,我们一般使用下拉框,这时绑定一个ms-change事件,就搞定。

            function SeatReservation(name, type) {
this.name = name;
this.type = type
} var model = avalon.define('seatsVM', function(vm) {
vm.seats = [
new SeatReservation("Steve", "硬座"),
new SeatReservation("Bert", "软卧")
];
vm.types = {
"硬座": 20,
"软座": 39.99,
"软卧": 120
}
vm.totalSurcharge = 0
vm.addSeat = function() {
vm.seats.push(new SeatReservation("newName", "硬座"));
}
vm.changePrice = getPrice
}) function getPrice() {
var result = 0;
for (var i = 0, el; el = model.seats[i++];) {
result += model.types[el.type]
}
model.totalSurcharge = result.toFixed(2)
}
getPrice()//先求出已有座位的总票价
//监听增删
model.seats.$watch("length", getPrice)

上述代码中定义了一个微型类,它表示预票,上面有着座位的持有人与座位类型。统计总票价有getPrice方法处理,它有几个消费者,ms-change与$watch回调。ms-change位于视图的下拉框中,$watch回调是用于监听车票的数量变化。像总票价totalSurcharge 与 座位类型等重要消息都做成VM的一个属性,方便在视图中显示。

        <div  ms-controller="seatsVM">
<div class="page-header">
<h1> seatVM </h1>
</div>
<div class="info">
<h3 class="seats">座位预约(<span>{{seats.size()}}</span>)</h3>
<div class="money-wrap">
<h3 class="money" ms-visible="totalSurcharge > 0">
总计费用:$ {{totalSurcharge}}
</h3>
</div>
<div class="btns-wrap">
<button class="btn btn-primary" ms-click="addSeat" ms-enabled="seats.size() < 5">新增订位</button>
</div>
</div> <table class="table">
<thead>
<tr>
<th>姓名</th><th>档次</th><th>费用</th><th>操作</th>
</tr>
</thead>
<tbody ms-each-seat="seats">
<tr>
<td><input type="text" ms-duplex="seat.name" /></td>
<td>
<select ms-with="types" ms-duplex="seat.type" ms-mouseleave="changePrice">
<option ms-value="$key" >{{$key}}</option>
</select>
</td>
<td>{{console.log(seat.type),types[seat.type]}}</td>
<td><a href="javascript:void(0);" ms-click="$remove">删除</a></td>
</tr>
</tbody>
</table> </div>

在社图中我们还试验了许多钟绑定,如ms-enabled,每人限购五张票,ms-visible,没有买就不用显示价钱,ms-duplex用于绑定被选中的座位类型。

avalon.ready(function(){
function SeatReservation(name, type) {
this.name = name;
this.type = type
}

var model = avalon.define('seatsVM', function(vm) {
vm.seats = [
new SeatReservation("Steve", "硬座"),
new SeatReservation("Bert", "软卧")
];
vm.types = {
"硬座": 20,
"软座": 39.99,
"软卧": 120
}
vm.totalSurcharge = 0
vm.addSeat = function() {
vm.seats.push(new SeatReservation("newName", "硬座"));
}
vm.changePrice = getPrice
})

function getPrice() {
var result = 0;
for (var i = 0, el; el = model.seats[i++]; ) {
result += model.types[el.type]
}
model.totalSurcharge = result.toFixed(2)
}
getPrice()//先求出已有座位的总票价
//监听增删
model.seats.$watch("length", getPrice)
avalon.scan();
})

例子

seatVM

座位预约({{seats.size()}})

0">
总计费用:$ {{totalSurcharge}}

新增订位

姓名 档次 费用 操作

{{$key}}

{{types[seat.type]}} 删除

使用avalon 实现一个订座系统的更多相关文章

  1. windows API 开发飞机订票系统 图形化界面 (四)

    接下来的是录入航班.修改航班信息功能的实现: //录入航班 BOOL EntryFlight(HWND hEntryDlg){ TCHAR szDiscount[]; TCHAR szFare[],s ...

  2. Java版飞机订票系统

    关注微信公众号:Worldhello 回复 飞机订票系统 可获得系统源代码并可加群讨论交流 数据结构课程设计题目:          [飞机订票系统]            通过此系统可以实现如下功能 ...

  3. 学生管理系统-火车订票系统 c语言课程设计

    概要: C 语言课程设计一---学生管理系统 使使用 C 语言实现学生管理系统.系统实现对学生的基本信息和考试成绩的 管理.采用终端命令界面,作为系统的输入输出界面.采用文件作为信息存储介质. 功能描 ...

  4. 课程设计之(struts2+Hibernate)航空订票系统

    1.题目 课程设计之航空订票系统 为某家机票预订服务商开发一个机票预订和查询管理系统.该系统中的航班和机票信息由多家航空公司负责提供.客户通过上网方式查询航班时间表.机票可用信息.机票折扣信息,可以远 ...

  5. jQuery在线选座订座(影院篇)

    原文:jQuery在线选座订座(影院篇) 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选 ...

  6. 基于socket.io的实时在线选座系统

    基于socket.io的实时在线选座系统(demo) 前言 前段时间公司做一个关于剧院的项目,遇到了这样一种情况. 在高并发多用户同时选座的情况下,假设A用户进入选座页面,正在选择座位,此时还没有提交 ...

  7. loadrunner飞机订票系统从登陆订票退票登出的脚本实现代码调试通过

    在LR自带的飞机订票系统中,完整模拟一个用户从登陆->订票->退票->登出这样一个业务流程,分解每个事务为一个Action: 进入首页->登陆->进入订票页面->选 ...

  8. loadrunner笔记(二):飞机订票系统--客户信息注册

    (一)  几个重要概念说明 集合点:同步虚拟用户,以便同一时间执行任务. 事务:事务是指服务器响应用户请求所用的时间,当然它可以衡量某个操作,如登录所需要的时间,也可以衡量一系列的操作所用的时间,如从 ...

  9. LoadRunner 自带订票系统flights 功能空白、1080端口被占用的解决办法

    LoadRunner 自带订票系统flights 功能空白.1080端口被占用的解决办法 安装LoadRunner8.1后运行Mercury Web Tours Application,点击fligh ...

随机推荐

  1. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  2. Oracle数据库之二

    SELECT查询 函数分为: 单行函数 -- 一条记录进入,一条记录输出 多行函数(分组函数)-- 多条记录进入,按组输出 单行函数: select id,first_name,nvl(commiss ...

  3. document.body.innerHTML用jquery如何表示

    $("body").html('XXXX');     //这个是赋值 $("body").html();    //这个是获取HTML的内容

  4. Bootstrap介绍以及配置

    一.Bootstrap概述: 1.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架. 2.用于开发响应式布局.移动设备优先的 W ...

  5. website project team member 角色及开发过程概念图

    一个web项目的团队往往具有以下角色的人员组成: project stakeholder(client or business owner)产品经理 Project manager 项目经理 prod ...

  6. HDU 1080 Human Gene Functions

    最长公共子序列的变形 题目大意:给出两个基因序列,求这两个序列的最大相似度. 题目中的表格给出了两两脱氧核苷酸的相似度. 状态转移方程为: dp[i][j] = max(dp[i-1][j]+Simi ...

  7. kafka_2.9.2-0.8.1.1分布式集群搭建代码开发实例

    准备3台虚拟机, 系统是RHEL64服务版. 1) 每台机器配置如下:$ cat /etc/hosts    # zookeeper hostnames:       192.168.8.182    ...

  8. Asp.Net验证码1

    验证码html调用 验证码:<input name="> <img src="CodeHandler.ashx" id="imgCode&qu ...

  9. python练习程序(c100经典例1)

    题目: 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? num=0; for i in range(1,5): for j in range(1,5): for k in ...

  10. [转]vi与vim的区别

    一直用着vi,有朋友劝我用vim,那么它们有什么区别呢? 简单点来说,它们都是多模式编辑器, 不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令, 而且还有一些新的特性在里面. vim的这些优 ...