使用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. Java学习小结（1）-数组的创建与传参

    (一)数组的创建 数组的创建包括两部分:数组的申明与分配内存空间. int score[]=null; //申明一维数组 score=new int[3]; //分配长度为3的空间 数组的申明还有另外 ...

  2. PHP学习之环境搭建

    计算机环境 win7  64位 搭建  apache-httpd-2.2-win64  +  php-5.3.6-Win32-VC9-x64  +MySQL_5.5.13_winx64开发环境 参考: ...

  3. mysql之创建外键报150错误的处理方法

    这几天由于在赶项目进度,也就没有及时记录下自己的学习情况 ,在完成项目的这段时间里,碰到了很多问题,在解决问题的过程中学习了不少技巧. 这里就主要介绍一下在mysql数据库中为表之间建立外键时报100 ...

  4. 1 server - n clients 模型实现（select）

    拓扑结构: 各个客户端创建读写管道,通过“上下线信息管道”向服务器发送上下线信息和读写管道名称.服务器接受信息,修改链表(存储客户端信息).客户端.服务器打开读写管道,服务器通过“W”管道接收从客户端 ...

  5. Session_set_save_handler 之 文本模式实现

    1.构建session抽象类,实现Session_set_save_hanlder函数必须的基础函数 <?php /* 实现session利用文件形式或者数据库等其它形式进行存储操作 * aut ...

  6. go语言实现线程池

    话说真的好久没有写博客了,最近赶新项目,工作太忙了.这一周任务比较少,又可以随便敲敲了. 逛论坛的时候突发奇想,想用go语言实现一个线程池,主要功能是:添加total个任务到线程池中,线程池开启num ...

  7. bnuoj 29373 Key Logger（模拟双向队列）

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=29373 [题意]:模拟光标输入 [题解]:用双向列表模拟实现,这里用其他模拟会超时,注意内存的释放 ...

  8. bnuoj 29375 Two Strings(字符串？)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=29375 [题意]:可以对两字符串进行如下操作: 1.可以无损耗交换相邻两个字符(可以理解成交换任意字 ...

  9. FreeMarker 乱码解决方案 生成静态html文件

    读取模板的时候有一个编码: Template template = this.tempConfiguration.getTemplate(templatePath,"UTF-8") ...

  10. linux jps 命令

    参考: http://blog.csdn.net/gtuu0123/article/details/6025520 http://blog.csdn.net/alivetime/article/det ...