原创js模型驱动
使用ajax方式请求数据，向页面展示一个对象的时候，往往让人头疼的是一大堆 .val() .text()方法，这样做固然不会出错，但是效率太低
以下提供一个自己编写的Jquery模型驱动插件，正在测试中....目前可用。
前提：自行扩展data-model属性，用来控制数据展示
/**
* jquery-model.js
* author brose
*
**/
;(function(o) {
o.fn.extend({
modelDriver: function(obj) {
var _this = this,
setting = obj || {};
_this.find("[data-model]").each(function(index, item) {
var $item = $(item),
_nodeName = item.nodeName,
_modelName = $item.attr("data-model");
for (var i in setting) {
if (i === _modelName) {
if (_nodeName === "INPUT" || _nodeName === "SELECT") {
$item.val(obj[i]);
} else {
$item.text(obj[i]);
}
}
}
}) }
});
})($);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-1.8.3.min.js"type="text/javascript"></script>
<script src="js/jquery-model.js"type="text/javascript"></script> <script> var _ajaxResult={username:"Brose",company:"中南海"}
$(function(){
$("#myModel").modelDriver(_ajaxResult);
}) </script> </head>
<body>
<div id="myModel">
用户名：<span data-model="username"></span><br>
密码：<input type="text" data-model="company" name="company" value="">
</div>
</body>
</html>
原创js模型驱动的更多相关文章
- Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)
之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...
- (原创)JS闭包看代码理解
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 原创:js代码, 让dedecms支持Tag选择, 添加内容更为方便,不用手输Tag
dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔, 输入法切来切去很不方便, 于是动手改后台代码, 利用后台的tags_main.php, 让d ...
- 原创js脚本实现百度网盘任意文件强制下载
代码: //get file list data var data=require("system-core:context/context.js").instanceForSys ...
- [原创]JS实现数据筛选(each)
做列表的时候,有时候需要按照某些条件进行查询,如班级,分组之类.但是又不想在重新从服务器获取数据,可以进行隐藏
- 原创js自动补全---auotocomplete
if ($("input.autocomplete_input").length > 0) { $("input.autocomplete_input") ...
- 纯JS焦点图特效（可一个页面多用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 转easyui datagrid 前台分页的实现
easyui datagrid 前台分页的实现java采用的版本 来源:本站原创 js知识 超过5,090人围观 暂无评论 使用easyui分页,有后台服务器端实现和前台浏览器端实现.服务器端实现按规 ...
- 网易云课堂《JS原创视频教程-知识点类》
http://caniuse.com/#index //Can I use... Support tables for HTML5, CSS3, etc-支持h5和css3的情况列表 JS包含 ...
随机推荐
- Spark小课堂Week3 FirstSparkApp(RDD开发)
Spark小课堂Week3 FirstSparkApp 问题:Java有哪些数据结构 大致有如下几种,其中List与Map是最重要的: List Map Set Array Heap Stack Qu ...
- [旧博客]Python 第一天总结
语法部分: 3**4 表示3的四次方 -1**3 结果是-1 raw_input 输入文本 input 输入值,input 3*3 结果为9 pow(5,5) 等于 5*5 abs(-1.8) 等于 ...
- 拓展，Fibonacci螺旋
#该程序由023递归这课中的fibonacci数列递归写法修改而成 #在写的过程中发现,如果要正确引导用户的每一次输入,写的代码比主程序还要多 #当然,为了使程序在用户交互过程中显得更加友好,提供错误 ...
- Nagios脚本编写事例
目标:编写一个简单的nagios脚本,实现监控client上的nginx进程是否启动,假如没启动的话发出报警. 首先在master上对nagios的配置文件进行设置,修改services.cfg文件, ...
- Beaglebone Back学习三（开发环境搭建）
开发环境搭建 1 Ubuntu环境搭建 2 Window环境搭建 3 开发板环境搭建 1 Ubuntu环境搭建 (1)安装必要的网络工具 samba nfs tftp vmware-tools sam ...
- CC2640-之功耗
一.测量方式,以DEMO板测量,以消除其它外围不同造成的电流不同. 二.测量结果 以原厂simpleBLEperipheral工程为例 1.如果在低功耗模式下,+5DB发射,最小电流为1.66MA 2 ...
- EXTJS 4.2 资料 控件GroupingGrid
http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html
- Apple移动设备处理器指令集 armv6、armv7、armv7s及arm64-b
Arm处理器,因为其低功耗和小尺寸而闻名,几乎所有的手机处理器都基于arm,其在嵌入式系统中的应用非常广泛,它的性能在同等功耗产品中也很出色. Armv6.armv7.armv7s.arm64都是ar ...
- 进入 App Store 打分
很多用户用了好软件后忘记或嫌麻烦而不去 App Store 进行打分评星,为此开发者可以在应用中加入打分按钮,点击后直接跳转到 App Store 的评分界面. App Store 上评论的链接地址是 ...
- hdu 4722 Good Numbers（规律题）
http://acm.hdu.edu.cn/showproblem.php?pid=4722 [题意]: 找GoodNumbers一个数N,如果它每一个位数字之和可以整除10,那么它就是GoodNum ...