使用jquery插件维护状态

时间:2010-12-23 18:16:20

标签: jquery jquery-plugins

我正在编写一个需要维护状态的jQuery插件。页面上将有多个实例,但每个实例将具有与数据库中的键相关联的不同数据。我试图在jQuery网站上使用这个例子作为我的起点,但遇到了一些困难。这里'hid'和'hnid'是我感兴趣的关键值。在制作中我将通过选项传递它们。但我的问题是,当我点击保存按钮并运行'保存'方法时,如何获取我的数据键,隐藏和隐藏?现在,当我运行代码时,我得到数据为空。

(function($) {

    var settings = {        
        'background-color': 'blue'
    };

    var saveData = function() {
        var data = $(this).data('inknote');// now this refers to save button so has no 'data' associated with it.
        console.log('data', data);
    }

var methods = {

    init: function(options) {

        return this.each(function() {

            if (options) {
                $.extend(settings, options);
            }
            var $this = $(this),
            data = $this.data('inknote');

            // If the plugin hasn't been initialized yet
            if (!data) {

                var startData = {
                    target: $this,
                    hid: 1,
                    hnid: 2
                };
                $this.data('inknote', startData);
            }

            var $messageDiv = $('<div>').addClass('messages').html('&nbsp;');
/* am I calling the save method properly here ?*/
                var $saveButton = $('<input>').attr('type', 'button').attr('value', 'Save').bind('click', function() { methods['save'].apply(this); });
                var $printButton = $('<input>').attr('type', 'button').attr('value', 'Print').bind('click', function() { methods['print'].apply(this); });
                var $lockStatus = $('<div>').addClass('lock').addClass('unlocked').html('&nbsp;');
                $this.append($messageDiv).append($saveButton).append($printButton).append($lockStatus);
            });
        },
        save: function(el) {

            return $(this).each(function() {
                saveData(this);                
            });
        },
        print: function(el) {
            return false;
        }
    };

    $.fn.inknote = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.inknote');
        }

    };

})(jQuery);

1 个答案:

答案 0 :(得分:-2)

我不确定你想要达到的目标是什么,但this有帮助吗?