案例1：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-2.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//定义一个controller
var piliController = {
//选择视图
start: function () {
this.view.start();
},
//将用户操作映射到模型更新上
set: function (name) {
this.model.setPerson(name);
}
};
piliController.model = {
//此数据从中间数据层拿json.data(经中间件(简单做法封转一个页面所有的业务请求接口一个ajax请求回调搞定)批量查询后的静态资源)并处理填充
piliKV: {
'叶小钗': '刀狂剑痴',
'一页书': '百世经纶',
'素还真': '清香白莲'
},
curPerson: null,
//数据模型负责业务逻辑和数据存储
setPerson: function (name) {
this.curPerson = this.piliKV[name] ? name : null;
this.onchange();
},
//通知数据同步更新
onchange: function () {
piliController.view.update();
},
//相应视图对当前状态的查询
getPiliAction: function () {
return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
}
};
//=======================================================================
// 以下为界面代码，当要调整界面，改这里就行啦~~~
piliController.view = {
//用户触发change事件
start: function () {
$('#pili').change(this.onchange);
},
onchange: function () {
piliController.set($('#pili').val());
},
update: function () {
$('#end').html(piliController.model.getPiliAction());
}
};
//=======================================================================
piliController.start();
});
</script>
</head>
<body>
<select id="pili">
<option value="叶小钗">叶小钗</option>
<option value="一页书">一页书</option>
<option value="素还真">素还真</option>
</select>
<div id="end"></div>
</body>
</html>
案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script>
$(function () {
var Countries = function () { }
Countries.prototype = {
_items: [],
_getData: function (success) {
//此数据从中间数据层拿json.data(经中间件(简单做法封转一个页面所有的业务请求接口一个ajax请求回调搞定)批量查询后的静态资源)并处理填充
var items = [
{ id: 0, name: '中国' },
{ id: 1, name: '日本' },
{ id: 2, name: '美国' }
];
$.extend(this._items, items);
success(items);
},
//Events
on_selected: $.Callbacks(),
on_inserted: $.Callbacks(),
//Methods
select: function () {
var self = this;
this._getData(function (items) {
self.on_selected.fire({
sender: self,
items: items
});
});
},
insert: function (item) {
var self = this;
this._items.push(item);
self.on_inserted.fire({ sender: self, item: item });
}
}
//=======================================================================
// 以下为界面代码，当要调整界面，改这里就行啦~~~
var countries = new Countries();
countries.on_selected.add(function (args) {
$(args.items).each(function () {
$('#countries').append($('<option>').attr('value', this.id).text(this.name));
});
});
countries.on_inserted.add(function (args) {
$('#countries').append($('<option selected="selected">').attr('value', args.item.id).text(args.item.name));
});
var id = 10;
$('#btnAdd').click(function () {
countries.insert({ id: ++id, name: $('#countryName').val() });
});
countries.select();
//=======================================================================
});
</script>
</head>
<body>
<select id="countries"></select>
<div>
<input id="countryName" /><button id="btnAdd">添加列表item</button>
</div>
</body>
</html>
分享到：
相关推荐
在Node.js环境中，中间件是一种功能强大的工具，用于构建web应用程序和服务。中间件函数遵循一个简单的方法调用链，使得处理请求和响应的过程更加模块化。在这个“Nodejs自定义解析表单数据的中间件案例”中，我们将...
这些关键词指向了分布式数据访问层中间件的几个核心功能：分库分表能够将数据分布存储在多个数据库服务器上，有效提高数据处理的可伸缩性和可用性；读写分离通过将数据库操作分为读操作和写操作，可以进一步提高系统...
本文提出了一种基于设计模式的数据访问中间件设计方案，旨在通过合理运用设计模式来增强中间件的功能性和灵活性。 #### 二、数据访问中间件设计 ##### 2.1 常见的数据层访问方法 传统的数据访问方法通常涉及应用...
数据计算中间件是一种重要的软件组件，它位于数据源和应用程序之间，主要负责提供高效的数据处理服务。这种中间件是为了解决数据计算的各种挑战而设计的，如报表开发的频繁变动、查询响应速度慢、数据库资源不足、...
整体而言，基于OPC和消息中间件的实时数据集成技术的研究和应用，是对工业自动化和企业信息化领域中数据处理技术的重要探索，它不仅解决了流程行业对于实时数据处理的需求，也为其他行业提供了参考和借鉴，对于推进...
理解这个简单的Delphi三层架构实例源码，有助于你掌握如何在Delphi中设计和实现可扩展、可维护的企业级应用。通过学习这个实例，你可以了解到如何组织代码以实现各层间的解耦，以及如何利用Delphi的特性来提高开发...
异构数据集成中间件应用是指基于 XML 的异构数据集成中间件在企业中的应用实例，例如在医院数字化档案平台的开发实例中，使用基于 XML 的异构数据集成中间件解决了医院数字化档案平台的异构数据交换问题。
综上所述，分布式数据层中间件（DDLM）作为应用层和数据库层之间的桥梁，提供了一种应对海量数据挑战的有效方法。它不仅能够帮助用户在无需更换底层数据库的情况下扩展应用性能，还为中型企业提供了一种低成本、高...
中间件技术原理及应用是计算机科学中的一个重要领域，它在分布式系统、企业级应用和云计算中扮演着核心角色。清华大学出版社出版的相关教材，通常具有权威性和深度，是学习这一主题的宝贵资源。作为老师上课时使用的...
提出了在企业应用集成EAI(Enterprise Application Integration)中基于本体的异构数据集成中间件，通过使用本体描述语 言(OWL)对数据源进行建模，提高了系统集成的灵活性，隔离了数据源模式的变化，使得局部数据源...
中间件，顾名思义，是一种位于操作系统和应用程序之间的软件层，它为开发人员提供了抽象化的接口和服务，简化了跨平台、网络通信和系统集成的工作。中间件的核心目标是解决分布式环境中的数据共享、服务交互、负载...
中间件作为一种连接不同系统、服务和应用程序的技术，它在GIS领域扮演着关键的角色，特别是在处理大规模、复杂的数据集时。 中间件在GIS开发中的应用主要体现在以下几个方面： 1. **数据集成与共享**：GIS项目往往...
该项目可能运用了Vue.js和Node.js技术，利用Vue.js构建前端界面，通过Vue Router管理路由，使用Express搭建后端服务器，可能还涉及了与API接口的交互，获取并展示知乎日报的数据。通过学习和分析这个项目，你可以...
1. **应用中间件阶段**：这一阶段主要是为了整合和连接RFID读写器，RFID读写器厂商会提供简单的API接口供企业将后端系统与RFID读写器连接起来。但是，此时的企业仍然需要投入大量的人力和物力来解决前后端系统的连接...
《Oracle与Sql Server数据库数据交换中间件的设计与应用》这篇论文探讨了在IT服务管理（ITSM）背景下，如何通过中间件技术实现Oracle与Sql Server数据库之间的数据共享与转录，从而提高故障处理效率和业务处理能力。...
- 中间件的定义：中间件是位于硬件和操作系统之上，应用软件之下的一层软件，它提供通用服务，使得不同应用之间的交互变得简单。 - 中间件的作用：提高系统间的互操作性，支持分布式计算，实现数据共享，简化应用...
常见的中间件类型包括消息中间件、交易中间件、数据访问中间件、Web服务器和应用服务器等。 消息中间件是中间件的一种，它通过消息传递机制实现应用程序之间的异步通信。例如，IBM的WebSphere MQ和Apache的ActiveMQ...