使用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模型驱动的更多相关文章

  1. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  2. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. 原创:js代码, 让dedecms支持Tag选择, 添加内容更为方便,不用手输Tag

    dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔,  输入法切来切去很不方便,   于是动手改后台代码, 利用后台的tags_main.php, 让d ...

  4. 原创js脚本实现百度网盘任意文件强制下载

    代码: //get file list data var data=require("system-core:context/context.js").instanceForSys ...

  5. [原创]JS实现数据筛选(each)

    做列表的时候,有时候需要按照某些条件进行查询,如班级,分组之类.但是又不想在重新从服务器获取数据,可以进行隐藏

  6. 原创js自动补全---auotocomplete

    if ($("input.autocomplete_input").length > 0) { $("input.autocomplete_input") ...

  7. 纯JS焦点图特效（可一个页面多用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 转easyui datagrid 前台分页的实现

    easyui datagrid 前台分页的实现java采用的版本 来源:本站原创 js知识 超过5,090人围观 暂无评论 使用easyui分页,有后台服务器端实现和前台浏览器端实现.服务器端实现按规 ...

  9. 网易云课堂《JS原创视频教程-知识点类》

    http://caniuse.com/#index     //Can I use... Support tables for HTML5, CSS3, etc-支持h5和css3的情况列表 JS包含 ...

随机推荐

  1. Review PHP设计模式之——注册模式

    注册模式: class DbConnections{ var $_store = array(); public function isValid($key) { return isset($this ...

  2. JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  3. SQL动态更新表字段 传入字段可能为空

    小技巧: 项目组有修改产品的基本信息字段 但有时候传入的字段可能为空 也可能不为空  动态修改表中字段. USE [BetaProductMarket_DB] GO )) BEGIN DROP PRO ...

  4. 拥抱ARM妹子第二季 之 序：我和春天有个约会 - 生命的萌芽

      春姑年轻轻的吻了一下小穆妹纸的额头!从沉睡中苏醒的小穆妹纸,缓缓伸了个懒腰--- 啊-- 睡得真香! 等--等-等-!好像和童话故事里的情节不一样,应该由王子我来亲吻睡梦中的妹纸才能醒!!-- 强 ...

  5. Arcgis 10.1 求面里面所包含的点的平均值

    空间链接的作用：将面上的所有点的值加起来取平均值。赋值给面属性。（我们可以定义右击——定义合并规则 连接要素的字段映射参数中指定的合并规则仅适用于连接要素中的属性，且仅适用于多个要素与目标要素匹配   ...

  6. SPFA&邻接表 PASCAL

    题目来自CODE[VS]-->热浪 1557 热浪 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石       题目描述 Description 德克萨斯纯朴的民眾们这个 ...

  7. 文档翻译-Minimizing your app's Memory Footprint

    原文地址:https://developer.apple.com/library/ios/technotes/tn2434/_index.html#//apple_ref/doc/uid/DTS400 ...

  8. Hibernate 二级缓存 总结整理（转）

    和<Hibernate 关系映射 收集.总结整理> 一样,本篇文章也是我很早之前收集.总结整理的,在此也发上来 希望对大家有用.因为是很早之前写的,不当之处请指正. 1.缓存:缓存是什么, ...

  9. EasyUI combotree值的设置 setValue

    如果combotree的json数据如下: [ { "id":"2", "text":"wwwww", "st ...

  10. jmeter 响应结果分析一

    转自:http://www.cnblogs.com/Carrie_Liang/archive/2008/11/05/1327604.html Jmeter测试结果分析这一篇,我打算分成上下两部分.上篇 ...