原创js模型驱动

最新推荐文章于 2023-05-22 16:49:10 发布

bangman4009

最新推荐文章于 2023-05-22 16:49:10 发布

阅读量157

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Brose/p/jquery_js_model.html

版权

使用ajax方式请求数据，向页面展示一个对象的时候，往往让人头疼的是一大堆 .val() .text()方法，这样做固然不会出错，但是效率太低

以下提供一个自己编写的Jquery模型驱动插件，正在测试中....目前可用。

前提：自行扩展data-model属性，用来控制数据展示

 1 /**
 2  * jquery-model.js
 3  * author  brose
 4  *
 5  **/
 6 ;(function(o) {
 7       o.fn.extend({
 8           modelDriver: function(obj) {
 9               var _this = this,
10                   setting = obj || {};
11               _this.find("[data-model]").each(function(index, item) {
12                   var $item = $(item),
13                       _nodeName = item.nodeName,
14                       _modelName = $item.attr("data-model");
15                   for (var i in setting) {
16                       if (i === _modelName) {
17                           if (_nodeName === "INPUT" || _nodeName === "SELECT") {
18                               $item.val(obj[i]);
19                           } else {
20                               $item.text(obj[i]);
21                           }
22                       }
23                   }
24               })
25 
26           }
27       });
28   })($);

<!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>