JSFiddle - React, Tailwind, and code Playground

by rightson

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Learning About Backbone.js AJAX</title>
</head>
<body>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
</body>
</html>

JavaScript

Backbone.emulateHTTP = true; 
Backbone.emulateJSON = true; 
 
var Person = Backbone.Model.extend({
  initialize: function() {
    this.on('all', function(e) { 
      console.log(this.get('name') + " event: " + e); });
  },
  defaults: {
    name: 'undefined',
    age: 'undefined'
  },
  urlRoot: "/echo/html",
  url: function() {
    var base = this.urlRoot || (this.collection && this.collection.url) || "/";
    if (this.isNew()) return base;
    return base + "?id=" + encodeURIComponent(this.id);
  }
});
 
var person = new Person({id:1});
person.fetch(); 
 
person = new Person({name:"Joe Zim", age:23});
person.save(); 
 
person = new Person({id:1, name:"Joe Zim", age:23});
person.save(); 
person.destroy();
 
var People = Backbone.Collection.extend({
    initialize: function() {
        this.on('all', function(e) { console.log("People event: " + e); });
    },
    model: Person,
    url: "/echo/html"
});    
 
var people = new People();
people.fetch(); 
people.create({name:"Joe Zim", age:23}); 
people.create({id:6, name:"Chuck Norris", age:72});