jQuery插件第五十七：数据容器repeater

CSS

repeater{
    display: none;
}

JS

String.prototype.format = function (model) {
    return this.replace(/\{\{(\w+)\}\}/g, function (s, i) {
        var key = s.replace(/[^\w/?#%]*/g, '');
        return model[key];
    });
}
String.prototype.repeat = function (model, sepa) {
    sepa = (!sepa) ? '' : sepa;
    var thisTempArray = [];
    for (var m = 0, n = model.length; m < n; m++) {
        thisTempArray.push(this.replace(/\{\{(\w+)\}\}/g, function (s, i) {
            var key = s.replace(/[^\w/?#%]*/g, '');
            if (key.indexOf('_') != -1) {
                var keylst = key.split('_');
                var list = JSON.parse(model[m][keylst[0]]);
                var that = $("#" + keylst[1]);
                var template = that.find('item-template').html();
                var separator = that.find('separator-template').length > 0 ? that.find('separator-template').html() : '';
                var tempArray = [];
                for (var i = 0, j = list.length; i < j; i++) {
                    var item = list[i];
                    tempArray.push(template.format(item));
                }
                return tempArray.join(separator);
            } else {
                return model[m][key];
            }
        }))
    }
    return thisTempArray.join(sepa);
}

function checkUrl(url) {
    var strReg = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
    if (!strReg.test(url)) {
        return false;
    } else {
        return true;
    }
}

function requestModel() {
    var model = {};
    var url = location.search; //获取url中"?"符后的字串
    if (url.indexOf("?") != -1) {    //判断是否有参数
        var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
        var arr = str.split('&');
        //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
        for (var i = 0, j = arr.length; i < j; i++) {
            var item = arr[i].split('=');
            model[item[0]] = decodeURI(item[1]);
        }
    }
    return model;
}

(function ($) {
    $.fn.repeater = function (options) {
        var defaults = {
            control: null,  //jquery object
            onItemDataBound: null, //function(control)
            url: null, //getJSONUrl
            debug: true
        }
        var opt = $.extend(defaults, options);
        this.each(function () {
            var _this = $(this);
            if (opt.debug) {
                console.info('ID is the jquery.repeater plug-in for ' + this.id);
            }
            var $result = opt.control && opt.control.length > 0 ? opt.control : _this.parent();
            $.getJSON(opt.url, function (data) {
                if ($.isArray(data) == false) {
                    return false;
                } else if (opt.debug) {
                    console.info(' data:', data);
                }
                $result.find('.repeater_result').remove();
                if (data.length > 0) {
                    data = (typeof(opt.onItemDataBound) == "function") ? opt.onItemDataBound(data) : data;
                    if (_this.find("item-template").length > 0) {
                        var contentWithHead = _this.find("head-template").html();
                        var contentWithKeyword = _this.find("item-template").html().repeat(data);
                        if (contentWithHead) {
                            $result.append($(contentWithHead).addClass('repeater_result').append(contentWithKeyword));
                        } else {
                            $result.append($(contentWithKeyword).addClass('repeater_result'));
                        }

                    }
                } else {
                    if (_this.find("empty-template").length > 0) {
                        var emptycontent = _this.find("empty-template").html();
                        $result.append($(emptycontent).addClass('repeater_result'));
                    }
                }
            });

        });
    };
})(jQuery);

$(function () {
    var dataBound = (typeof(itemDataBoundEvent) == "function") ? itemDataBoundEvent : null;
    $("repeater").each(function () {
        var url = $(this).data("url");
        if (url != '' && url != null) {
            url = url.format(requestModel());
        }
        if (checkUrl(encodeURI(url))) {
            var controlId = $(this).data("control");
            var controlObj = (!controlId) ? null : $("#" + controlId);
            $(this).repeater({url: url, control: controlObj, onItemDataBound: dataBound});
        }
    });
})