Permalink
Browse files

Adding an example of pulling the model data from a separate JSON reso…

…urce.

In this case, the resource is local, but it works as expected.
  • Loading branch information...
1 parent e0be68f commit 30e90eb0c6efdb4e36269b358e5cf6b7482c5d20 Harry Love committed Sep 26, 2011
Showing with 417 additions and 0 deletions.
  1. +38 −0 apps/simple-sync/app.js
  2. +18 −0 apps/simple-sync/index.html
  3. +4 −0 apps/simple-sync/thing.json
  4. +1 −0 index.html
  5. +356 −0 js/ajax.js
@@ -0,0 +1,38 @@
+require([
+ "../../js/underscore",
+ "../../js/zepto",
+ "../../js/ajax",
+ "../../js/backbone"
+ ], function() {
+ require.ready(function() {
+ BBExample();
+ });
+});
+
+// An extension of the simple attribute change, this time storing the attribute to localStorage
+var BBExample = function() {
+
+ var ThingView = Backbone.View.extend({
+
+ initialize: function() {
+ this.model.bind('change', this.render, this);
+ },
+
+ el: 'section',
+
+ render: function() {
+ $(this.el).html('The name of our Thing is ' + this.model.get('name'));
+ $(this.el).append('. And the age is ' + this.model.get('age'));
+ return this;
+ }
+ });
+
+ var Thing = Backbone.Model.extend({url:'thing.json'});
+
+ var thing = new Thing;
+
+ var thingView = new ThingView({ model: thing });
+
+ thing.fetch();
+
+};
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Simple sync</title>
+ </head>
+ <body>
+ <header>
+ <nav>
+ <a href="../../index.html">Parent index</a>
+ </nav>
+ <h1>Simple sync</h1>
+ </header>
+ <section>Loading</section>
+ <!-- See app.js (the "data-main" js file loaded by require.js) -->
+ <script data-main="app" src="../../js/require.js"></script>
+ </body>
+</html>
@@ -0,0 +1,4 @@
+{
+ "name": "The Thing",
+ "age": "Too Old"
+}
View
@@ -15,6 +15,7 @@
<li><a href="apps/form-attribute-change/index.html">Form attribute change</a></li>
<li><a href="apps/router-change-view/index.html">Using the router to change view</a></li>
<li><a href="apps/local-storage/index.html">Local storage</a></li>
+ <li><a href="apps/simple-sync/index.html">Simple sync</a></li>
</ul>
</section>
<section>
Oops, something went wrong.

0 comments on commit 30e90eb

Please sign in to comment.