На третьей неделе погружения Hack Reactor мы внедряем одно и то же приложение видеоплеера с тремя разными платформами MVC. С небольшим предыдущим опытом работы с интерфейсом для меня это была бурная неделя. К тому времени, когда я начал чувствовать себя комфортно с одним MVC, мы перешли к следующему, и одно из предложений, которое персонал дал мне, чтобы укрепить основные концепции каждой среды, заключалось в том, чтобы выделить основные концепции в пятнадцать строк кода.

Итак, вот столько костяка, сколько я мог уместить в пятнадцать строк. Если вам нужен простой способ попробовать код магистрали, перейдите на backbone.js, откройте инструменты разработчика Chrome и запустите приведенный ниже фрагмент кода.

1  $("body").empty();
2  var ToDo = Backbone.Model.extend({
3    initialize: function(task) { this.set({ task: task }); }
4  });
5  var ToDoView = Backbone.View.extend({
6    events: { click: "deleteTask" },
7    deleteTask: function() { this.$el.hide(); },
8    render: function() {
9     var html = ["<li>", this.model.get("task"), "</li>"].join("");
10    return this.$el.html(html);
11   }
12 });
13 var todo1 = new ToDo("review React next");
14 var todoView = new ToDoView({ model: todo1 });
15 $("body").append(todoView.render());

Вся первая и большая часть последней строки — это jQuery, который включен в основу. Первый очищает веб-страницу, а последний добавляет отрендеренный экземпляр магистрального представления к телу страницы.

Я немного схитрил, сжав некоторый код, который должен быть в несколько строк, чтобы уместить примеры базовой модели, представления и события в пятнадцати строках. Базовая модель позволяет нам создавать экземпляры класса по мере необходимости, а связанное представление содержит HTML-шаблон и обработчик событий. Строки 13 и 14 создают и связывают наши экземпляры Model и View, при этом экземпляр Model передается как значение свойства «model» представления. Наш простой обработчик событий скрывает задачу при нажатии. $el в строке 7 — это бесплатный объект jQuery, предоставляемый каждым основным представлением, которое ссылается на само представление. $elкэшируется, поэтому мы не выполняем поиск jQuery каждый раз, когда хотим использовать для него метод jQuery. И модели, и представления могут быть сгруппированы в коллекции моделей и представлений, что у меня не было возможности продемонстрировать здесь. Сбор моделей позволяет нам выполнять задачи над объектами с аналогичной структурой в наших приложениях, в то время как коллекция представлений будет включать шаблон html для представления связанных представлений в контейнере.