На третьей неделе погружения 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 для представления связанных представлений в контейнере.