JSFiddle - React, Tailwind, and code Playground

by Győző Horváth

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<div id="bookForm"></div>
<div id="bookPanel"></div>

<script type="text/template" id="bookForm-template">
    Title: <input type="text" id="txtTitle" value="<%= title %>"> <br>
    Author: <input type="text" id="txtAuthor" value="<%= author %>">
</script>
    
<script type="text/template" id="bookPanel-template">
    Title: <%= title %> <br>
    Author: <%= author %>
</script>

JavaScript

var BookModel = Backbone.Model.extend({
    defaults: {
        title: '',
        author: ''
    }
});

var book = new BookModel({
    title: 'JavaScript Patterns',
    author: 'Stoyan Stefanov'
});

// console.log(book);

var FormView = Backbone.View.extend({
    el: '#bookForm',

    model: book,

    template: _.template($('#bookForm-template').html()),

    events: {
        'keyup input': 'writing'
    },

    initialize: function() {
        this.listenTo(this.model, 'change', this.updateView);

        this.render();
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    },

    updateView: function(data) {
        //console.log(arguments);
        this.$('#txtTitle').val(data.get('title'));
        this.$('#txtAuthor').val(data.get('author'));
    },

    writing: function(e) {
        this.model.set('title', $('#txtTitle').val());
        this.model.set('author', $('#txtAuthor').val());
    }
});

var PanelView = Backbone.View.extend({
    el: '#bookPanel',

    model: book,

    template: _.template($('#bookPanel-template').html()),

    initialize: function() {
        this.listenTo(this.model, 'change', this.render);

        this.render();
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});


var AppView = Backbone.View.extend({
    initialize: function() {
        var formView = new FormView();
        var panelView = new PanelView();
    }
});

new AppView();