JSFiddle - React, Tailwind, and code Playground

by areski

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>I have a back bone</title>
    </head>
    <body>
        <button id="add-friend">Add Friend</button>
        <ul id="friends-list">
        </ul>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
    </body>
</html>

JavaScript

(function($) {

    Friend = Backbone.Model.extend({
        //Create a model to hold friend atribute
        name: null
      });

    Friends = Backbone.Collection.extend({
        //This is our Friends collection and holds our Friend models
        initialize: function (models, options) {
          this.bind("add", options.view.addFriendLi);
          //Listen for new additions to the collection and call a view function if so
        }
      });

    AppView = Backbone.View.extend({
        el: $("body"),
        initialize: function() {
            this.friends = new Friends(null, {
                view: this
            });
        },
        events: {
            "click #add-friend": "showPrompt",
        },
        showPrompt: function() {
            var friend_name = prompt("who is your friend?");
            var friend_model = new Friend({
                name: friend_name
            });
            this.friends.add(friend_model);
        },
        addFriendLi: function (model) {
          //The parameter passed is a reference to the model that was added
          $("#friends-list").append("<li>" + model.get('name') + "</li>");
          //Use .get to receive attributes of the model
        }
    });

    var appview = new AppView;

})(jQuery);