Screencast: Offline Applikationen Teil 2

Download:

Download(27.2 MB, 14:51) Alternativer Download für iPod & Apple TV(25.1 MB, 14:51)

Resourcen:

• Episode 247: Offline Apps Part 1
• jquery-offline
• jquery-tmpl
• Full episode source code

Quellcode:

[bash] curl https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js > public/javascripts/jquery.tmpl.js curl https://github.com/wycats/jquery-offline/raw/master/lib/jquery.offline.js > public/javascripts/jquery.offline.js curl https://github.com/wycats/jquery-offline/raw/master/lib/json.js > public/javascripts/json.js [/bash]

[ruby] # items_controller.rb respond_to :html, :json

def index @items = Item.all respond_with(@items) end [/ruby]

[html] <%= javascript_include_tag :defaults, “jquery.tmpl”, “json”, “jquery.offline” %>

1. Loading items...

\[/html\]

[javascript] // application.js $(function() { if ($.support.localStorage) { $(window.applicationCache).bind(“error”, function() { console.log(“There was an error when loading the cache manifest.”); }); if (!localStorage[“pendingItems”]) { localStorage[“pendingItems”] = JSON.stringify([]); } $.retrieveJSON(“/items.json”, function(data) { var pendingItems = $.parseJSON(localStorage[“pendingItems”]); $(“#items”).html($(“#item_template”).tmpl(data.concat(pendingItems))); }); $(“#new_item”).submit(function(e) { var pendingItems = $.parseJSON(localStorage[“pendingItems”]); var item = {“data”:$(this).serialize(), “item”:{“name”:$(“#item_name”).val()}}; $(“#item_template”).tmpl(item).appendTo(“#items”); pendingItems.push(item); localStorage[“pendingItems”] = JSON.stringify(pendingItems) $(“#item_name”).val(""); sendPending(); e.preventDefault(); }); function sendPending() { if (window.navigator.onLine) { var pendingItems = $.parseJSON(localStorage[“pendingItems”]); if (pendingItems.length > 0) { var item = pendingItems[0]; $.post(“/items”, item.data, function(data) { var pendingItems = $.parseJSON(localStorage[“pendingItems”]); pendingItems.shift(); localStorage[“pendingItems”] = JSON.stringify(pendingItems) setTimeout(sendPending, 100); }); } } } sendPending(); $(window).bind(“online”, sendPending); } else { alert(“Try a different browser.”); } }); [/javascript]