<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>
<!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>