datasource/docs/datasource-caching.mustache

	datasource-caching.mustache revision 72378c4b11f0468874fbad14749246d2ae564474
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster<style scoped>
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster/* custom styles for this example */
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster#demo .output {
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    margin-bottom:1em;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    padding:10px;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    border:1px solid #D9D9D9;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster}
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster#demo .output pre {
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    font-size: 11px;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster}
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster#demo .output strong {
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    padding: .25em .4em;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    background: #333;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    color: #fff;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    text-shadow: -1px -1px 1px #000;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    border-radius: 5px;
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster}
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster</style>
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster<div class="intro">
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    <p>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`.
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster</div>
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster<div class="example">
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster    {{>datasource-caching-source}}
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster</div>
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster<p>Use the <code>plug()</code> method to initialize the
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster<code>DataSourceCache</code> plugin and pass in the configuration value
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster<code>max</code> to set the maximum size.</p>
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster
0a99555401a033704f1f171baab6db11fb5528f2Allan Foster```
0a99555401a033704f1f171baab6db11fb5528f2Allan FosterYUI().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
    });
});
```

<h3 id="fullsource">Full Example Source Listing</h3>

```
    {{>datasource-caching-source}}
```