从jQuery select中访问插件方法

Question

背景

我创建了一个jQuery插件，插件会占用页面上的所有表格并通过发出远程请求来加载行。

代码示例

这是一个简单的示例，它可以提高插件使用的结构。在实际示例中，load函数发出一个AJAX请求并处理结果向表中添加行。

的JavaScript

(function($) {

    $.table = function(el, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        base.load = function() {
            base.$el.find('tbody:last').append("<tr><td>...</td><td>...</td></tr>");
        };

        base.load();
    };

    $.fn.table = function(options) {
        options = options || {};
        return this.find(options.selector)
            .each(function(index) {
                new $.table(this, options);
        })
    };
})(jQuery);;

HTML

<table id="table1" data-role="table">
    <thead id="tour-table">
        <tr>
            <th data-id="id" width="20px">col1</th>
            <th data-id="given_name">col2</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table id="table2" data-role="table">
    <thead id="tour-table">
        <tr>
            <th data-id="id" width="20px">col1</th>
            <th data-id="given_name">col2</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

我在这样的页面上初始化所有表格。

$('body').table({selector:'[data-role="table"]'});

的jsfiddle

您可以在行动http://jsfiddle.net/RWy5r/1/

中看到一个示例

问题

是否可以将加载函数暴露给dom，以便我可以针对这样的对象调用它？

$("#table1").load();

或

$("#table1").table.load();

使用上面的简单示例，结果将是ID为“table1”的表将附加<td>，所有其他表（包括ID为“table2”的表）将保持不变。

Answer 1

这花了我一点时间来研究，但解决方案非常简单。我们需要做的就是将插件创建的对象添加到dom中，以便我们以后可以访问它，jQuery已经提供了一种通过.data（）函数执行此操作的方法。

解决方案

(function($) {

    $.table = function(el, options) {
        var id = $(el).attr("id");
        $.data($(el).get(0), "table", this);//add the new object to the dom so we can access it later

        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);

        base.load = function() {

            base.$el.find('tbody:last').append("<tr><td>...</td><td>...</td></tr>");
        };

        base.load();
    };

    $.fn.table = function(options) {
        options = options || {};
        return this.find(options.selector).each(function(index) {
                new $.table(this, options);
        })
    };

    //public method to provide access to the plugin object from the dom
    $.fn.table.load = function(selection) {
        $.data($(selection).get(0), "table").load();
    } 

    $('body').table({selector:'[data-role="table"]'});

    $('#btn1').click(function(){
        $.data($("#table1").get(0), "table").load();
    });


    $('#btn2').click(function(){
        $("#table2").table.load("#table2");
    });
})(jQuery);​

查看一个工作示例http://jsfiddle.net/leviputna/RWy5r/5/

解释

当插件初始化时，我存储了针对dom对象创建的对象，以便稍后可以访问它。 $.data($(el).get(0), "table", this);

然后我公开了一个公共函数，它将根据选择找到对象并调用load方法。

$.fn.table.load = function(selection) {
    $.data($(selection).get(0), "table").load();
}

最后，我在点击功能上添加了两个，以说明实际的过程。

$('#btn1').click(function(){
    $.data($("#table1").get(0), "table").load();
});

我希望这个解决方案可以帮助将来的某个人。