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>
<form>
    Sugár: <input type="text" id="sugar"> 
    <br>
    <input type="button" value="Számolj!" id="gomb">
    <p id="kimenet"></p>
</form>

JavaScript

var Kor = Backbone.Model.extend({
    defaults: {
        r: 0
    },
    kerulet: function() {
        return 2 * Math.PI * this.get('r');
    }
});

var kor = new Kor();

var FormView = Backbone.View.extend({
    el: 'form',
    
    model: kor,
    
    events: {
        'click #gomb': 'keruletSzamol'
    },
    
    keruletSzamol: function() {
        //beolvasás
        var r = this.$('#sugar').val();
        this.model.set('r', r)
        //feldolgozás
        var k = this.model.kerulet();
        //kiírás
        this.$('#kimenet').html(k);
    }
});

var app = new FormView();