原创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包含 ...
随机推荐
- js 根据当前星期做跳转（代码段）
var week = [6,0,1,2,3,4,5]; $('.HotShop_head .HotShop_tab:eq('+week[new Date().getDay()]+')').click( ...
- liger grid loadData
function fn_Search() { var beginDt = $("#txtBegin").val(); var endDt = $("#txtEnd&quo ...
- java 中的匿名内部类
转自http://www.cnblogs.com/nerxious/archive/2013/01/25/2876489.html 匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能 ...
- C++程序员笔试复习概要（一）
第8章 类和对象的创建 [内容提要] 类和对象 构造函数和析构函数 对象数组与对象指针 静态成员 友元 静态函数 虚函数 [重点与难点] 8.1 类和对象 8.1.1 类的定义 类实质上是用户 ...
- Java调用SQLCMD遇到的问题
今天用Java调用SQLCMD命令时,一直提示找不到SQLCMD命令,但是通过CMD命令确可以使用,因为我的sqlcmd是新安装的,所以重新配置了新的path路径,而cmd可以调用是因为重新开一个cm ...
- Extjs4.2布局——layout: accordion(Ext.layout.container.Accordion)
API这样介绍这种布局: 示例:(来自API)注:打开默认展开第一个面板. Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', wid ...
- 原创新闻 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- [转载]汇编eax寄存器和AX,AH,AL之间的关系
00000000 00000000 00000000 00000000|===============EAX===============|---32个0,4个字节,2个字,1个双字 ...
- Samza的ApplicationMaster
当Samza ApplicationMaster启动时,它做以下的事情: 通过STREAMING_CONFIG环境变量从YARN获取配置信息(configuration) 在随机端口上 启动一个JMX ...
- 【C++基础】关键字static 局部变量
1.局部变量 static局部变量和普通局部变量有什么区别:static局部变量只被初始化一次,下一次依据上一次结果值: int test(int j){ static int i=10; i=i+j ...