Use backbone for about me page

source/_assets/about_me/index.js

@@ -1,40 +1,63 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
+import Metrika from '../common/metrika';
 import './style.scss'
 
-const notes = [
-    'Любимый фильм "Три идиота".',
-    'Люблю кататься на велосипеде.',
-    'Люблю читать фантастические книги.',
-    'Люблю шоколад.',
-    'На день рождения ко мне можно прийти без подарка.',
-    'Не люблю пьяных людей.',
-    'Предпочитаю ходить в кино на 2D-сеансы.',
-    'Проехал на велосипеде 200 километров за день.',
-    'Работаю программистом.',
-    'Хотел бы побывать в горах.',
-];
 
-function selectRandomNote() {
-    return notes[Math.floor(Math.random() * notes.length)];
-}
+const PageView = Backbone.View.extend({
 
-function updateNode() {
-    const el = document.getElementById('about-me-note');
-    if (el) {
-        el.innerHTML = selectRandomNote();
-    }
-}
+    notes: [
+        'Люблю фильм "Три идиота".',
+        'Люблю кататься на велосипеде.',
+        'Люблю читать фантастические книги.',
+        'Люблю шоколад.',
+        'На день рождения ко мне можно прийти без подарка.',
+        'Не люблю пьяных людей.',
+        'Предпочитаю ходить в кино на 2D-сеансы.',
+        'Проехал на велосипеде 200 километров за день.',
+        'Работаю программистом.',
+        'Хотел бы побывать в горах.',
+    ],
 
-function onKnowBetter(event) {
-    event.preventDefault();
-    if (window.yaCounter41913764) {
-        window.yaCounter41913764.hit(location.href);
-    }
-    updateNode();
-}
+    shown: [],
 
-window.addEventListener('DOMContentLoaded', updateNode);
+    events: {
+        'click #know-better': 'onClickKnowBetter',
+    },
 
-const el = document.getElementById('know-better');
-if (el) {
-    el.addEventListener('click', onKnowBetter);
-}
+    initialize() {
+        this.render();
+    },
+
+    render() {
+        this.showRandomFact();
+        return this;
+    },
+
+    pickRandomFact() {
+        let available = _.difference(this.notes, this.shown);
+        if (_.size(available) === 0) {
+            available = this.notes;
+            this.shown = [];
+        }
+
+        const phrase = _.sample(available);
+        this.shown.push(phrase);
+
+        return phrase;
+    },
+
+    showRandomFact() {
+        const fact = this.pickRandomFact();
+        this.$('#about-me-note').text(fact);
+    },
+
+    onClickKnowBetter(evt) {
+        evt.preventDefault();
+        this.showRandomFact();
+        Metrika.hit(location.href);
+    },
+});
+
+new PageView({ el: $('.js-about-me')});

source/_assets/common/metrika.js

@@ -0,0 +1,9 @@
+class Metrika {
+    hit(name) {
+        if (window.yaCounter41913764) {
+            window.yaCounter41913764.hit(name);
+        }
+    }
+}
+
+export default new Metrika();

source/about/me.html.twig

@@ -9,10 +9,10 @@ title: Обо мне
 
 {% block content %}
 
-  <section class="about-me">
+  <section class="about-me js-about-me">
     <div class="about-me__content">
 
-      <div class="about-me__note" id="about-me-note">Я люблю шоколад.</div>
+      <div class="about-me__note" id="about-me-note"></div>
 
       <ul class="about-me__links">
         <li class="about-me__link">