Сценарии: переход на сторону клиента с листовкой, позвоночником и жасмином

Провал

Мы можем это исправить.

Я Карта [Просмотр]!

Есть ли там поклонники Доры? Нет? Верно, я тоже Вот реализация MapView:

 ### app/assets/javascripts/views/mapView.js ### class App.MapView extends Backbone.View el: "div#map", initialize: -> @mapProvider = this.options.mapProvider @initialCenter = this.options.initialCenter || { latitude: 51.505, longitude: 0.09 } @render() setInitialView: -> @mapProvider.setViewForMap latitude: @initialCenter.latitude, longitude: @initialCenter.longitude zoomLevel: 13 render: -> @mapProvider.createMap(@el.id) @setInitialView() 

После добавления этого файла перезагрузка тестовой страницы Jasmine выглядит следующим образом:

Проходят

Знаете ли вы путь к карте, Хосе?

Итак, у нас есть MapView. Как нам заставить нашу страницу использовать ее? Я имею в виду, я не вижу карту, когда захожу на свою страницу «/ events» в Loccasions. Именно здесь вступает в игру «Маршрутизатор» Backbone (или «Формально известный как художник»). В этом случае мы хотим направить «корневой маршрут» или «/» в место, где он знает, чтобы создать наш MapView. Я написал пару спецификаций для выполнения этого требования:

 // spec/javascripts/appRouter_spec.js describe("AppRouter", function() { describe("index", function() { beforeEach(function() { loadFixtures("map.html"); this.mapViewStub = sinon.spy(App.MapView.prototype, "initialize"); window.bootstrapEvents = []; }); afterEach(function(){ this.mapViewStub.restore(); }); it("should create a map view", function() { this.router = new App.Router(); this.router.index(); expect(this.mapViewStub).toHaveBeenCalled(); }); }); describe("/", function () { it("should respond to empty hash with index", function() { this.router = new App.Router(); this.routeSpy = sinon.spy(); try { Backbone.history.start({silent:true, pushState:true}); } catch(e) {} this.router.navigate("elsewhere"); this.router.bind("route:index", this.routeSpy); this.router.navigate("", true); expect(this.routeSpy).toHaveBeenCalledOnce(); expect(this.routeSpy).toHaveBeenCalledWith(); }); }); }); в // spec/javascripts/appRouter_spec.js describe("AppRouter", function() { describe("index", function() { beforeEach(function() { loadFixtures("map.html"); this.mapViewStub = sinon.spy(App.MapView.prototype, "initialize"); window.bootstrapEvents = []; }); afterEach(function(){ this.mapViewStub.restore(); }); it("should create a map view", function() { this.router = new App.Router(); this.router.index(); expect(this.mapViewStub).toHaveBeenCalled(); }); }); describe("/", function () { it("should respond to empty hash with index", function() { this.router = new App.Router(); this.routeSpy = sinon.spy(); try { Backbone.history.start({silent:true, pushState:true}); } catch(e) {} this.router.navigate("elsewhere"); this.router.bind("route:index", this.routeSpy); this.router.navigate("", true); expect(this.routeSpy).toHaveBeenCalledOnce(); expect(this.routeSpy).toHaveBeenCalledWith(); }); }); }); 

В этом случае мы используем третью короткую шутку Синона, называемую «шпион». Шпион похож на макет, но вы не можете установить для него возвращаемое значение. Шпион существует только для записи, был ли он вызван и какие аргументы использовались для его вызова. Это хорошо работает для нашего первого теста, где мы проверяем, что метод инициализации в нашем MapView вызывается. Во втором тесте используется шпион, чтобы убедиться, что при переходе пользователя к «корневому маршруту» вызывается функция индекса AppRouter #.

Перезагрузка нашей страницы Jasmine дает нам соответствующие сбои, поэтому давайте напишем наш класс AppRouter:

 ### app/assets/javascripts/router.js.coffee< ### class App.Router extends Backbone.Router routes: "" : "index" index: -> if $('#map').length > 0 @mapView = new App.MapView( mapProvider: new App.MapProviders.Leaflet() ) 

Выполнено. Спецификации проходят.

Начни меня

Последнее, что нам нужно сделать, — это загрузить код нашего приложения Backbone. Другими словами, мы должны сказать Backbone, чтобы установить маршрутизатор, создать все представления и все остальное, что ему нужно сделать. Я создал небольшой файл coffescript для этого:

 ### app/assets/javascripts/app.js.coffee ### window.App = start: -> new App.Router() Backbone.history.start( pushState: true, root: "/events" ) $(App.start) 

Этот файл определяет пространство имен моего приложения ( App ) и создает нашу функцию start . функция запуска просто создает наш маршрутизатор и сообщает Backbone начать обработку маршрутизации. Если вы хотите точно понять, что делает Backbone.history.start , посмотрите здесь .

Обновить

Г-н Генри (из комментариев ниже) отметил следующее:

• Добавьте div #map в ваши события / index.html.haml
• Добавьте #map {height: 350px} в приложение / assets / stylesheets / events.css.scss

Вот страница с картой:

Что ты видишь

У нас еще много работы на этой странице. Тем не менее, это хорошая остановка, и я хочу немного поиграть с картой.

Мой блоггер пошел повсюду, и все, что я получил, было этой паршивой картой

Я знаю, это была тонна работы, чтобы получить карту. Тем не менее, мы также теперь имеем:

• Структура нашего клиентского кода.
• Способ вытеснения клиентского кода с помощью тестов (TDD / BDD / ETC)
• КАРТА!

Мы закончим страницу индекса событий в следующем посте, а затем выделим, как отличается страница Occasions. После этого v0.0.1 Loccasions должен быть почти готов.