JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<form id="blog-input" action="#">
    <label for="blogtitle">Title</label>
    <input type="text" id="blogtitle" placeholder="Enter Blog title" />
    <label for="blogtext">Blog Content</label>
    <textarea id="blogtext" placeholder="Enter Blog text"></textarea>
    <button id="blogsubmit" value="Submit">Submit</button>
</form>
<hr>
<div id="main"></div>
<!-- Templates -->
<script type="text/template" id="blog-template">
    <div id = '<%=blogtitle%>'><p><%= blogtitle %></p><div><%= blogtext %></div></div>
</script>
<script type="text/template" id="bloglist-template">
    <div id="blogs"> </div>
<script>

JavaScript

var Blog = Backbone.Model.extend({
    defaults: {
        blogtitle: "blog title",
        blogtext: "This is blog text"
    }
});

var Bloglist = Backbone.Collection.extend({
    model: Blog

});



$(document).ready(function () {
    $("#blogsubmit").bind("click", function () {
        var blog = new Blog();
        blog.set("blogtitle", $("#blogtitle").val());
        blog.set("blogtext", $("#blogtext").val());
        console.info(blog.get("blogtitle"));
        console.info(blog.get("blogtext"));
        var blogView = new BlogView({
            model: blog
        });
        blogView.render();
        return false;
    });
});


// Individual Blog View
var BlogView = Backbone.View.extend({
    template: _.template($("#blog-template").html()), // only compile template
    el: 'div#blogs', // not required for a nested view
    events: {}, // TODO

    render: function () {
        console.info(this.$el);
        this.$el.html(this.template(this.model.toJSON())); // return this bit of a view
        return this;
    }
});


// Blog List View
var BlogListView = Backbone.View.extend({
    template: _.template($("bloglist-template").html()), // only compile template
    el: 'div#main',

    render: function () {
        console.info(this.$el);
        this.$el.html(this.template());
        return this;
    }
});

//// model tests
var blog = new Blog();
console.info(blog.get("blogtitle"));
console.info(blog.get("blogtext"));
console.info(blog.toJSON());
////

/// View Tests
var blogView = new BlogView({
    model: blog
});
blogView.render();
///

/// List View Tests

var bloglistView = new BlogListView({
});
bloglistView.render();
blogView.render();

////