jQuery UI Widget工厂

Question

$.widget( "app.serverTime", {
    _create: function () {
        $.get("/timestamp.php", function( data ) {
           this.timestamp = data.timestamp;
        })
    },

    getTime:function() {
       return this.timestamp;
    }
});


$(".clock").serverTime();
$(".clock").serverTime("getTime")

I have the above jQuery UI Widget when I call the getTime I am getting in the value I am expected but instead I am getting the jQuery Selector, when i set the value manually without using Ajax it works as expected.

Answer 1

I think the issue is because of this. Inside the get function this not refer to the plugin calee object.

So save this reference and use it later like:

$.widget( "app.serverTime", {
    _create: function () {
        var _this=this;
        $.get("/timestamp.php", function( data ) {
           _this.timestamp = data.timestamp;
        })
    },

    getTime:function() {
       return this.timestamp;
    }
});

EDIT

Consider that the $.get is async, so the timestamp property will be set when the $.get finish, but the code runs.

Concept:

$(".clock").serverTime();

setTimeout(function () {
    console.log($(".clock").serverTime("getTime"));
}, 5000);

So think about handle the async properly.

Demo: http://jsfiddle.net/IrvinDominin/5pFkk/