您的位置：首页 > Web前端 > JavaScript

原创js模型驱动

2015-11-30 16:23 246 查看

使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航