Example: DataSource with Caching

The DataSourceCache plugin enables caching on any DataSource to reduce high-latency calls to remote sources and to reduce server load. In this example, the Cache's max value has been set to 3.

Look up github repositories by username (e.g., davglass, lsmith or rgrove):

Use the plug() method to initialize the DataSourceCache plugin and pass in the configuration value max to set the maximum size.

YUI().use("datasource", "dataschema", "cache", function (Y) {
    var callback = {
            success: function (e) { /* output to screen */ },
            failure: function (e) { /* output to screen */ }
        },

        myDataSource = new Y.DataSource.Get({
            source: "https://api.github.com/users/",

            // this is only needed because the query appends the url
            // rather than the url's query params
            generateRequestCallback: function (guid) {
                return '/repos?callback=YUI.Env.DataSource.callbacks.' + guid;
            }
        }),

    myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "data",
            resultFields: ["name"]
        }
    });

    myDataSource.plug(Y.Plugin.DataSourceCache, { max: 3 });

    // Adds to cache
    myDataSource.sendRequest({
        request : "lsmith",
        callback: callback
    });

    // Adds to cache
    myDataSource.sendRequest({
        request : "davglass",
        callback: callback
    });

    // Retrieves from cache
    myDataSource.sendRequest({
        request : "lsmith",
        callback: callback
    });
});

Full Example Source Listing

<form id="demo" action="http://search.yahoo.com/search">
<h6>Look up github repositories by username (e.g., davglass, lsmith or rgrove):</h6>
<input type="input" id="demo_input_query" name="p">
<input type="submit" id="demo_query_retrieve" value="Retrieve data">
<input type="button" id="demo_cache_clear" value="Clear cache">
<div id="demo_output_response" class="output"></div>
</form>

<script type="text/javascript">
YUI().use("json-stringify","node", "datasource-get", "datasource-jsonschema", "datasource-cache", "datatype-date", function (Y) {
var output = Y.one("#demo_output_response"),
    source = "remote source",

    myDataSource = new Y.DataSource.Get({
        source:"https://api.github.com/users/",
        generateRequestCallback: function (guid) {
            return '/repos?callback=YUI.Env.DataSource.callbacks.' + guid;
        }
    }),

    callback = {
        success: function(e){
            var when = Y.DataType.Date.format(new Date(), {format:"%F %r"}),
                data = Y.JSON.stringify(e.response, null, 2);

            output.setHTML(
                "<p>[" + when + "] Retrieved from " +
                "<strong>" + source + "</strong></p>" +
                "<pre>" +
                    data.replace(/&/g,"&amp;")
                        .replace(/</g,"&lt;")
                        .replace(/>/g,"&gt;") +
                "</pre>");
        },
        failure: function(e){
            var when = Y.DataType.Date.format(new Date(), {format:"%F %r"}),
                message = /fields retrieval/.test(e.error.message) ?
                    "User not found" : e.error.message;

            output.setHTML(
                "<p>[" + when + "] Could not retrieve data: " +
                    "<em>" + message + "</em>" +
                "</p>");
        }
    };

myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
    schema: {
        resultListLocator: "data",
        resultFields: ["name"]
    }
});

myDataSource.plug(Y.Plugin.DataSourceCache, { max: 3 });
myDataSource.cache.on("retrieve", function(){
    source = "cache";
});

Y.one("#demo_cache_clear").on("click", function(){
    var when = Y.DataType.Date.format(new Date(), {format:"%F %r"});

    myDataSource.cache.flush();
    output.setHTML("<p>[" + when + "] Cache cleared.</p>");
});

Y.on("submit", function(e){
    e.halt();
    var query = encodeURIComponent(
                    Y.one("#demo_input_query")
                        .get("value")
                        .replace(/"/g,'\\"')
                        .replace(/\W/g, ''));

    if(query) {
        source = "remote source";
        myDataSource.sendRequest({
            request:query,
            callback:callback
        });
    } else {
        output.setHTML("<p>Please enter a query.</p>");
    }
}, "#demo");
});
</script>