使用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学习日志（3）-echo&print

    在php中,结果输出一共有两种方式:echo和print,下面将对两种方式做一个比较. echo与print的区别:   echo print 连续输出字符串 能连续输出多个字符串 只能输出一个字符串 ...

  2. VS2005打开VS2008 VS2010 VS2012

    我用vs2005较多,但网上找的代码经常是08 10 或者2012的,总结了以下技巧可以打开工程比较小巧的高版本代码. <1>用记事本打开解决方案文件“解决方案名.sln”,然后修改最上面 ...

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

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

  4. html 5 drag and drop upload file

    compatible: chrome firefox ie 11 , not supported demo: http://demo.tutorialzine.com/2011/09/html5-fi ...

  5. sql之表连接 筛选条件放在 连接外和放在连接里的区别

    使用一个简单的例子,说明他们之间的区别 使用的表:[Sales.Orders]订单表和[Sales.Customers]客户表,和上一篇博客的表相同 业务要求:查询出 : 所有的用户 在 2012-1 ...

  6. vc编程时说“Cannot open include file: 'unistd.h': No such file or directory”

    本文专自http://blog.csdn.net/mangobar/article/details/6314700 unistd.h是unix standard header之意,因此,Linux下开 ...

  7. poj 3463 Sightseeing( 最短路与次短路)

    http://poj.org/problem?id=3463 Sightseeing Time Limit: 2000MS   Memory Limit: 65536K Total Submissio ...

  8. uva 10369

    数组开小了  还RE了一遍.......  最小生成树    按费用从小到大排... #include <iostream> #include <algorithm> #inc ...

  9. 认识FiddlerScript

    FiddlerScript 是Fiddler 的一项非常强大的功能,它允许你增强Fiddler UI,添加新的特性,修改请求与响应内容等等... 1.编写FiddlerScript FiddlerSc ...

  10. Makefile教程

    Makefile学习教程: 跟我一起写 Makefile 0 Makefile概述 0.1 关于程序的编译和链接 1 Makefile 介绍 1.1 Makefile的规则 1.2 一个示例 1.3 ...