azproduction · sinseveriya · Apr 2, 2014 · azproduction · Apr 2, 2014 · azproduction
diff --git a/tasks/srp/refactoring/person.html b/tasks/srp/refactoring/person.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<head>
+</head>
+<body>
+    <div class="header">
+    </div>
+    <script src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
+    <script src="http://underscorejs.org/underscore-min.js"></script>
+    <script src="http://yandex.st/backbone/1.1.2/backbone-min.js"></script>
+    <script type="template" id="personTemplate">
+        <a href="<%= data.url %>" class="b-person <% isSameOrigin(data.url) && print('b-person_origin_same') %>"><%= data.name %></a>
+    </script>
+    <script src="person.js"></script>
+    <script>
+        var person = new PersonModel({
+            url: 'http://ya.ru',
+            name: 'Vasya'
+        });
+
+        var personView = new PersonView({
+            el: '.header',
+            model: person,
+            logger: Logger,
+            template: _.template($('#personTemplate').text())
+        });
+
+        personView.render();
+    </script>
+</body>
diff --git a/tasks/srp/refactoring/person.js b/tasks/srp/refactoring/person.js
@@ -1,41 +1,50 @@
-function Person(options) {
-    options = options || {};
-    this.name = options.name;
-    this.url = options.url;
-
-    this.$el = this.render();
-    this.bindEvents();
-    this.$el.appendTo('.header');
-}
-
-Person.prototype = {
-    render: function () {
-        var extraClass = this.isSameOrigin(this.url) ? ' b-person_origin_same' : '';
-        return $('<a href="' + this.url + '" class="b-person' + extraClass + '">' + this.name + '</a>');
+var isSameOrigin = function (url) {
+    var parser = document.createElement('a');
+    parser.href = url;
+
+    return location.origin === parser.origin;
+};
+
+var Logger = {
+    log: function (msg) {
+        //yaCounter100500.params(msg);
+        console.log('debug', msg);
+    }
+};
+
+var PersonModel = Backbone.Model.extend({});
+
+var PersonView = Backbone.View.extend({
+    initialize: function (o) {
+        this.listenTo(this.model, 'change:name', this._onNameChange);
+        this.listenTo(this.model, 'change:url', this._onUrlChange);
+
+        this.template = o.template;
+        this.logger = o.logger
     },
 
-    isSameOrigin: function (url) {
-        var parser = document.createElement('a');
-        parser.href = url;
+    events: {
+        'click a': '_onLinkClick'
+    },
 
-        return location.origin === parser.origin;
+    _onNameChange: function () {
+        this.render();
     },
 
-    setName: function (name) {
-        this.name = name;
-        this.$el.html(this.name);
+    _onUrlChange: function () {
+        this.render();
     },
 
-    setUrl: function (url) {
-        this.url = url;
-        this.$el.attr('href', this.url);
-        this.$el.toggleClass('b-person_origin_same', this.isSameOrigin(this.url));
+    _onLinkClick: function (e) {
+        this.logger.log('user_page_visited');
+        e.preventDefault();
     },
 
-    bindEvents: function () {
-        this.$el.on('click', function () {
-            yaCounter100500.params('user_page_visited');
-            console.log('debug', 'user_page_visited');
-        });
+    render: function() {
+        this.$el.html(this.template({
+            data: this.model.attributes,
+            isSameOrigin: isSameOrigin
+        }));
+        return this;
     }
-};
+});