azproduction · Zhigalov · Apr 2, 2014 · Apr 2, 2014 · azproduction · Apr 2, 2014
diff --git a/tasks/srp/refactoring/PersonCollection.js b/tasks/srp/refactoring/PersonCollection.js
@@ -0,0 +1,8 @@
+var Backbone = require('Backbone'),
+    Person = require('Person');
+
+var PersonCollection = Backbone.Collection.extend({
+    model: Person
+});
+
+module.export = PersonCollection;
diff --git a/tasks/srp/refactoring/PersonView.js b/tasks/srp/refactoring/PersonView.js
@@ -0,0 +1,33 @@
+var Backbone = require('Backbone'),
+    rivets = require('rivets'),
+    yaCounter100500 = require('yaCounter100500');
+
+var PersonView = Backbone.View.extend({
+
+    events: {
+        "click .b-person": "handleClick"
+    },
+
+    layout: $('.header'),
+
+    initialize: function(options) {
+        var viewModel = {
+            model: options.model
+        };
+        this.logger = options.logger;
+
+        this.setElement(this.layout);
+        this.dataBindTo(viewModel);
+    },
+
+    dataBindTo: function (viewModel) {
+        return rivets.bind(this.el, viewModel);
+    },
+
+    handleClick: function () {
+        yaCounter100500.params('user_page_visited');
+        this.logger.log('debug', 'user_page_visited');
+    }
+});
+
+module.export = PersonView;
diff --git a/tasks/srp/refactoring/formatter.js b/tasks/srp/refactoring/formatter.js
@@ -0,0 +1,10 @@
+var rivets = require('rivets');
+
+_.extend(rivets.formatters, {
+    isSameOrigin: function (url) {
+        var $parser = $('<a>');
+        $parser.attr('href', url);
+
+        return location.origin === $parser.origin;
+    }
+});
diff --git a/tasks/srp/refactoring/index.html b/tasks/srp/refactoring/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SOLID</title>
+</head>
+<body>
+<div class="header" data-each-person="model.persons">
+    <a href="{person.url}" class="b-person"
+       data-class-b-person_origin_same="person.url | isSameOrigin">{person.name}</a>
+</div>
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/tasks/srp/refactoring/index.js b/tasks/srp/refactoring/index.js
@@ -0,0 +1,10 @@
+var PersonCollection = require('PersonCollection'),
+    PersonView = require('PersonView');
+
+(function () {
+    var options = {
+        model: new PersonCollection(/*...*/),
+        logger: console
+    };
+    var view = new PersonView(options);
+})();
diff --git a/tasks/srp/refactoring/person.js b/tasks/srp/refactoring/person.js
@@ -1,41 +1,17 @@
 function Person(options) {
     options = options || {};
-    this.name = options.name;
-    this.url = options.url;
-
-    this.$el = this.render();
-    this.bindEvents();
-    this.$el.appendTo('.header');
+    this.setName(options.name);
+    this.setUrl(options.url);
 }
 
 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>');
-    },
-
-    isSameOrigin: function (url) {
-        var parser = document.createElement('a');
-        parser.href = url;
-
-        return location.origin === parser.origin;
-    },
-
     setName: function (name) {
         this.name = name;
-        this.$el.html(this.name);
     },
 
     setUrl: function (url) {
         this.url = url;
-        this.$el.attr('href', this.url);
-        this.$el.toggleClass('b-person_origin_same', this.isSameOrigin(this.url));
-    },
-
-    bindEvents: function () {
-        this.$el.on('click', function () {
-            yaCounter100500.params('user_page_visited');
-            console.log('debug', 'user_page_visited');
-        });
     }
 };
+
+module.export = Person;