使用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. PHP学习之环境搭建

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

  2. MYSQL 多表更新 UPDATE SET like concat('%',abc,'%');

    SQL语句为:select * from table1 where `text` like CONCAT('%',(select name from table2 where id =3),'%'); ...

  3. nginx如何实现404状态返回 200隐藏URL

    以http://WWW.cnblogs.COM为例: server        {                listen       80;                server_nam ...

  4. Spark小课堂Week6 启动日志详解

    Spark小课堂Week6 启动日志详解 作为分布式系统,Spark程序是非常难以使用传统方法来进行调试的,所以我们主要的武器是日志,今天会对启动日志进行一下详解. 日志详解 今天主要遍历下Strea ...

  5. 2016 Multi-University Training Contest 1 Necklace 环排+二分匹配

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5727 题意:由2*N颗宝石构成的环(阴阳宝石均为N颗且标号均从1~N) 之后给定M组 a,b;表示阳宝石a ...

  6. 【转】perl如何避免脚本在windows中闪一下就关闭

    写好了perl程序,运行后,准备等待结果输出时,结果双击后,看到屏幕闪了一下,然后什么都没有了,根本没有机会然你看到输出的结果 当你刚开始学习perl的时候,写好了程序,准备兴高采烈的等待结果输出时, ...

  7. C# asp Aspose.Cells 教程，包含增加勾选框，单元格，字体设置

    1,引用Aspose.Cells  dll 2,using Aspose.Cells; 3, Workbook excel = new Workbook(); string strFilePath = ...

  8. Critical Rendering Path

    1.生成 dom & cssom https://developers.google.com/web/fundamentals/performance/critical-rendering-p ...

  9. DB天气app冲刺第十一天

    今天是第十一天了.今天遇到了一个很麻烦的问题 就是程序好好的然后调试运行之后能够安装成功 但总是运行不了 一直闪退.最主要的问题是代码还没有问题,这是最让人揪心的一个问题了.因为有bug的话还可以改, ...

  10. ios 保存本地数据的方法

    1. NSString *path = [[NSBundle mainBundle] pathForResource:@"文件名" ofType:@"plist" ...