Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/haydn/json-api-store. An isomorphic JavaScript library that acts as an in memory data store for JSON API data. particlesystem.com/json-api-store
json-api
Something went wrong. Try again.
2.8 kB · 92 lines
HTML
at gh-pages
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <div id="main" style="display:none"> <h1 id="title"></h1> <p id="description"></p> <h2>Related Products</h2> <ul id="related"></ul> <h2>Categories</h2> <ul id="categories"></ul> <h2>Comments</h2> <ul id="comments"></ul> </div> <div id="loading"> Loading... </div> <div id="controls"> <hr> <button data-action="create" data-file="data/create-comment.json">Create Comment</button> <button data-action="update" data-file="data/update-comment.json">Update Comment</button> <button data-action="destroy" data-type="categories" data-id="2">Delete Category</button> </div> <script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="../dist/store.dev.js"></script> <script type="text/javascript" charset="utf-8" src="types/category.js"></script> <script type="text/javascript" charset="utf-8" src="types/comment.js"></script> <script type="text/javascript" charset="utf-8" src="types/product.js"></script> <script type="text/javascript">
var store = new Store();
store.define("categories", Category); store.define("comments", Comment); store.define("products", Product);
function render() {
var product = store.find("products", "1");
$("#main, #controls").show(); $("#loading").hide();
$("#title").text(product.title); $("#description").text(product.description);
$("#related").empty(); product.relatedProducts.forEach(function (related) { $("#related").append('<li>' + related.title + '</li>'); });
$("#categories").empty(); product.categories.forEach(function (category) { $("#categories").append('<li>' + category.title + '</li>'); });
$("#comments").empty(); product.comments.forEach(function (comment) { $("#comments").append('<li>' + comment.body + '</li>'); });
}
$.getJSON("data/product.json", function (response) { store.push(response); render(); });
$("button").on("click", function () {
var data = $(this).data();
$(this).attr("disabled", true);
if (data.action === "create" || data.action === "update") { $.getJSON(data.file, function (response) { store.push(response); render(); }); } else if (data.action === "destroy") { store.remove(data.type, data.id); render(); }
});
</script> </body></html>