JSFiddle - React, Tailwind, and code Playground

by Pavel Savushchyk

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>

JavaScript

var yaCounter100500 = {
    "params": function(param) {

    }
};
var PersonModel = Backbone.Model.extend({

});
var PersonView = Backbone.View.extend({
    initialize: function(options) {
        this.model = new PersonModel(options || {});
        this.render();
        this.model.on("change:name", this.updateName);
        this.model.on("change:url", this.updateUrl);
    },
    events: {
        "click": "countClick logClick"
    },
    render: function($target) {
        var extraClass = this.isSameOrigin() ? '_origin_same' : '';
        this.$el = $('<a href="' + this.model.get("url") + '" class="b-person' + extraClass + '">' + this.model.get("name") + '</a>');
        if ($target) {
            this.$el.appendTo($target);
        }
        return this.$el;
    },
    countClick: function() {
        yaCounter100500.params('user_page_visited');
    },
    logClick: function() {
        console.log('debug', 'user_page_visited');
    },
    isSameOrigin: function () {
        var parser = document.createElement('a');
        parser.href = this.model.get("url");

        return location.origin === parser.origin;
    },
    updateName: function() {
        this.$el.html(this.model.get("name"));
    },
    setName: function (name) {
        this.model.set(name);
    },

    updateUrl: function() {
        this.$el.attr('href', this.mode.get(url));
        this.$el.toggleClass('b-person_origin_same', this.isSameOrigin());
    },
    setUrl: function (url) {
        this.model.set(url);
    }

});