使用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. 将Ecshop后台fckeditor升级更改为kindeditor 4.1.10编辑器

    ecshop在win8部分电脑上,不管用任何浏览器,都打不开,即使升级到最新版本都不行,问题应该吃在fckeditor兼容上.fckeditor 很久未升级,换掉该编辑器是最佳方法 第一步:下载kin ...

  2. cxgrid GridMode 等于 True 时的一些问题。

    When using grid mode, the data controller loads a fixed number of dataset records into memory. The n ...

  3. xml学习总结(四)

    命名空间 (1)产生 问题:在不同的约束文档中,有不同好安逸的相同标记名称 解决办法 每个约束模式人当被赋予一个唯一的名称空间,每个名称空间可用一个唯一的URI表示 在XML实例中为来自不同模式文档的 ...

  4. ARM-Linux S5PV210 UART驱动（5）----串口的open操作（tty_open、uart_open）

    串口驱动初始化后,串口作为字符驱动也已经注册到系统了,/dev目录下也有设备文件节点了. 那接下来uart的操作是如何进行的呢? 操作硬件之前都是要先open设备,先来分析下这里的open函数具体做了 ...

  5. 代码规范-IAR设置

    1.在IAR内定义 char 2. 去掉相关的告警 3.LANGUAGE设置

  6. Java实现mysql数据库备份

    Runtime是一个与JVM运行时环境有关的类,这个类是Singleton的. Runtime.getRuntime()可以取得当前JVM的运行时环境,这也是在Java中唯一一个得到运行时环境的方法. ...

  7. Xcode免证书打包ipa

    1,创建证书 打开“钥匙串访问”创建证书 填写好内容后点击继续,之后的步骤什么都不用改,一路点击“确定”和“继续”,最后完成这个向导就可以了. 我们创建的证书是不被信任的,右键点击证书选择“显示简介” ...

  8. django开发框架-view ＆ template

    django框架的主要模型是MVT,Model模型,View视图,Template模板,基于基本的HttpRequest方式. django支持的数据库有四种:PostgreSQL,MySQL, Or ...

  9. TCP报头

    源端口和目的端口: 各占16位 ,服务相对应的源端口和目的端口. 序列号: 占32位,它的范围在[0~2^32-1],序号随着通信的进行不断的递增,当达到最大值的时候重新回到0在开始递增.TCP是面向 ...

  10. poj 2186 Popular Cows (强连通分量+缩点)

    http://poj.org/problem?id=2186 Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissi ...