Tytuł oryginału: Building Web Apps with Ember - Helionpdf.helion.pl/emberw/emberw.pdf · 2021. 2. 7. · Obietnice, obietnice 101 Metoda model() 102 ... miaäo równie tempo ycia

Tytuł oryginału: Building Web Apps with Ember.js

Tłumaczenie: Andrzej Stefański

ISBN: 978-83-283-0610-3

© 2015 Helion S.A.

Authorized Polish translation of the English edition Building Web Apps with Ember.js, ISBN 9781449370923 © 2014 Jesse Cravens and Thomas Q Brady.

This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/emberw.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/emberwMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/emberw

http://helion.pl/rf/emberw

http://helion.pl/ro/emberw

http://helion.pl

http://ebookpoint.pl/r/4CAKF

3

Spis tre ci

Wst p ............................................................................................... 7

1. Wprowadzenie do Ember.jsi wymagaj cych aplikacji internetowych ..................................... 15Czym jest „wymagaj ca aplikacja internetowa”? 16

Wymagaj ce aplikacje internetowe nie s dokumentami 16Stan w wymagaj cych aplikacjach internetowych 17D ugi czas dzia ania wymagaj cych aplikacji internetowych 19Wymagaj ce aplikacje internetowe maj architektur 21

Czym jest Ember.js? 23Dlaczego warto wybra Ember? 24

Ergonomia dewelopera? 24Czym jest ORM? 25

Czym jest Ruby on Rails? 25Czym jest Node.js? 26

Express.js 26

2. Podstawy ....................................................................................... 27Witaj, WWW 27SimpleHTTPServer naprawd prosty 30

czenie danych 32Ale gdzie znajduje si ca y kod? 34Co to takiego ten router? 35Dzia anie Ember 36Podsumowanie 39

3. Szkielet aplikacji i praca nad kodem z Ember ............................... 41Git 43Czym jest Yeoman? 45

Instalowanie Yeoman 45

Kup książkę Poleć książkę



4 Spis tre ci

Korzystanie z generatora aplikacji Ember z Yo 46Instalowanie wykorzystywanych narz dzi 46Instalowanie generatora 47Uruchamianie generatora 48

Wykorzystanie mened era pakietów Bower 53Grunt 54

Kompilacja, uruchomienie, testowanie 55Debugowanie z Ember Inspectorw przegl darkach Chrome i Firefox 57Podsumowanie 63

4. Prototyp aplikacji Rock’n’Roll Call: szablony ...............................65Rock’n’Roll 65Zaczynamy od HTML 68Podstawy Handlebars.js 69Zmienne 72Tworzenie odno ników za pomoc {{link-to}} 73Wprowadzanie danych z {{input}} 74Listy z {{each}} 77Warunki ze znacznikami {{if}} oraz {{else}} 79Obs uga dzia a u ytkownika za pomoc {{action}} 80Powi zane atrybuty 81Tworzenie w asnych znaczników 83Podsumowanie 86

5. Prototyp aplikacji Rock’n’Roll Call: router, cie ki i modele ........87URL — internetowy odpowiednik „kodu do poziomu” 88Routing 90

Router 92Dynamiczne cie ki 96

cie ki 97Modele 99

Obietnice, obietnice 101Metoda model() 102

Podsumowanie 105

6. Prototyp aplikacji Rock’n’Roll Call: kontrolery, widoki,po czenia z danymi i zdarzenia ................................................. 107Kontrolery 108Generowane w a ciwo ci 111




Spis tre ci 5

Pot ga obietnic i metoda model 113Widoki 120Podsumowanie 122

7. Zapisywanie danych .................................................................... 123Nie wymy lajmy Ajaksa na nowo 123Musi by lepszy sposób 126Biblioteki Ember do zapisywania danych po stronie klienta 126

Ember Data 126Ember Model 127Ember RESTless 127Ember Persistence Foundation 127

Skok na g bok wod z Ember Data 127Tworzenie routera, widoku i stanu dla aktywno ci 128Modele 129Zapisywanie danych wyszukiwanych przez u ytkownika 130

Warstwy abstrakcji: magazyn, serializacja i adaptery 134Ember Data Store 134Serializer 135Adaptery 135

Podsumowanie 141

8. Przygotowanie cz ci serwerowej ............................................. 143REST-owe API us ug sieciowych 144

Ember Data RESTAdapter 144Tworzenie makiet API EAK (Ember App Kit)za pomoc Express.js 145

Po co korzysta z Rails? 150Zarz dzanie zale no ciami:RVM (Ruby Version Manager) i Bundler 150Instalacja Rails 151Generowanie aplikacji startowej 151Aktualizacja Gemfile 153Usuwanie TurboLinks 153Dzia anie jednostronicowej aplikacji z Rails MVC 154Testy 156Dodanie Ember 157

Podsumowanie 163




6 Spis tre ci

9. Komponenty Ember ..................................................................... 165Anatomia komponentu Ember 166

Tworzenie szablonu 166Rozszerzanie Ember.Component 168Tworzenie wizualizacji za pomoc mapy termicznej z D3 169

Podsumowanie 173

10. Testowanie Ember ....................................................................... 175Testowanie Ember z Ember App Kit, Qunit i Testem 176Mechanizmy uruchamiaj ce testy Testem i Qunit 179Testy integracyjne Ember po stronie klienta 181

Funkcje pomocnicze 181Testowanie strony g ównej 182Testowanie cie ki Activities 183

Testy jednostkowe Ember 187Wykorzystanie Ember-Qunit 189Testy jednostkowe cie ek 190Korzystanie z FIXTURES 191Testy jednostkowe modeli 192

Podsumowanie 193

Skorowidz .................................................................................... 195




65

ROZDZIA 4.

Prototyp aplikacjiRock’n’Roll Call: szablony

W rozdziale 3. poznali my nowoczesne narz dzia wspomagaj ce prac przyprzygotowywaniu szkieletu z o onej aplikacji internetowej. Gdy mamy judobrze opanowane podstawy, nadszed czas, by zacz pisa kod.

W tym rozdziale skupimy si na systemie do obs ugi szablonów — Han-dlebars.js — który domy lnie jest do czany do aplikacji z frameworkiemEmber. Zwykle nie atwo jest ustali , od czego powinno si zaczyna oma-wianie tego typu systemu, z wieloma zale nymi od siebie „kurami” i „jajka-mi”. My zdecydowali my si rozpocz od szablonów, poniewa naszymzdaniem od tego powiniene zaczyna tworzenie ambitnego projektu. Potym, gdy przewrócisz ostatni stron tego rozdzia u, b dziesz wiedzia ,jak wprowadzi „ ywe” (powi zane dwustronnie) zmienne do szablonuHTML, jak automatycznie generowa (i aktualizowa ) listy HTML (znacz-niki UL i OL) z referencji do tablic, a nawet jak wykorzystywa w swoichszablonach konstrukcje logiczne (if/then/else).

Rock’n’RollGdy pojawia si potrzeba napisania aplikacji demonstruj cej nowy frameworklub nowy sposób pisania aplikacji, okazuje si , e jedynym chyba rozwi -zaniem jest napisanie aplikacji do zarz dzania list zada . Zastanawiali-my si , czy ma na to wp yw atmosfera w Dolinie Krzemowej. Mieszkamy

w Austin w Teksasie, w okolicy czasem nazywanej Krzemowymi Wzgó-rzami — okre lenie to jest pochodn du ej ilo ci firm technologicznych,które cz ciowo lub w ca o ci przenios y tu swoje biura z Kalifornii. Firmy




66 Rozdzia 4. Prototyp aplikacji Rock’n’Roll Call: szablony

te umiejscowi y si tutaj z wielu powodów, mi dzy innymi dla du o ta -szej ziemi i si y roboczej, ale nie mo emy si oprze wra eniu, e znaczeniemia o równie tempo ycia. Aby zademonstrowa swoje nastawienie, posta-nowili my, e nasza przyk adowa aplikacja nie b dzie dotyczy a produktyw-no ci. Zbudujemy co w stylu The Internet Movie Database (imdb.com), alew celu indeksowania zespo ów i muzyków, a nie filmów, re yserów i akto-rów. Aplikacj t nazwiemy Rock’n’Roll Call. A niezale nie od niej istniejeju wspania a aplikacja demonstracyjna Ember, obs uguj ca list rzeczy dozrobienia na portalu TodoMVC, któr mo na zobaczy pod adresemhttp://todomvc.com/examples/emberjs.

Aby tego typu aplikacja by a u yteczna, musi obs ugiwa co najmniej po-ni sze opcje:

U ytkownik musi mie mo liwo wyszukiwania artystów (utworów)po nazwie (tytule).

W idealnym przypadku nie powinno by konieczne okre lanie, czyszuka si artysty, czy utworu; u ytkownik powinien mie mo liwowpisania szukanego terminu i klikni cia Szukaj.

Wyniki wyszukiwania powinny by wy wietlane z oznaczeniami,jakiego typu element (artysta czy utwór) zosta odnaleziony.

Nie chcemy k opota u ytkowników konieczno ci zaznaczania, czychc szuka artysty, czy utworu, ale przy wy wietlaniu rezultatów po-winny prawdopodobnie by udost pnione filtry pozwalaj ce u ytkowni-kowi na tym etapie ograniczy zakres wy wietlanych informacji doodnalezionych artystów lub utworów.

Wyniki wyszukiwania powinny prowadzi do strony z wi ksz ilo ciinformacji na temat znalezionego elementu.

By oby wspaniale, gdyby ta strona zawiera a krótki opis znalezionegowyniku — biografi artysty lub histori utworu, a tak e linki do bardziejszczegó owych informacji lub nawet utworów dost pnych online.

Dla zabawy dajmy u ytkownikom mo liwo ledzenia popularno cimuzyki i artystów, których szukaj , dzi ki czemu u ytkownicy b dmogli oceni , jak powszechne s ich zainteresowania.

B dziemy musieli gdzie zapisywa te dane, a w idealnym przypadkub dziemy potrzebowali jakiego ciekawego sposobu wizualizowaniatakich danych.

Oczywi cie do uruchomienia aplikacji b dziemy potrzebowali du ej ilo cidanych na temat muzyki. Prawdopodobnie najwi ksz korzy ci z tego,e postanowili my przygotowa tak aplikacj demonstracyjn zamiast

aplikacji do zarz dzania zadaniami, jest fakt, i praktycznie nie jest mo liwe




Rock’n’Roll 67

samodzielne zbudowanie kompletnej aplikacji tego typu. Aplikacje do za-rz dzania zadaniami to wyspy — nie potrzebuj adnych danych, którenie zosta y wygenerowane przez u ytkownika. Nasza aplikacja, tak jakwi kszo aplikacji, które b dziesz budowa w realnym wiecie, b dziekorzysta z komunikacji z us ugami sieciowymi — zewn trznymi serweramidostarczaj cymi danych. W tym przypadku przygotowali my aplikacjkomunikuj c si z The Echo Nest (http://the.echonest.com), wspania us ugmusic intelligence z bogatym zestawem opcji, olbrzymi i ci gle rosn c ba-z danych, wspania dokumentacj oraz API dla JavaScript.

Uwaga, spoiler! Oto w jaki sposób zamierzamy to wszystko zrobi :

1. Utworzymy szablon, który b dzie mia pole TextField frameworka Emberpo czone ze zmienn o nazwie searchTerms, przekazuj cej dane dometody action zdefiniowanej w klasie ApplicationController, która prze-kierowuje do cie ki SearchResultsRoute. Zdefiniowany dla tej cie kiSearchResultsController odpyta Echo Nest API o dane znajduj ce siw zmiennej searchTerms.

SearchResultsController odpyta Echo Nest API dwukrotnie, raz zak a-daj c, e u ytkownik szuka nazwy artysty, i drugi raz szukaj c nazwyutworu.

2. Nasz szablon search-results przetworzy oddzielnie wyniki wyszuki-wa , tworz c nazwy klas, które pozwol nam zwizualizowa wynikiwyszukiwania artystów i utworów w inny sposób.

Nasz szablon search-results b dzie zawiera kilka znaczników checkboxframeworka Ember oraz miejsce do wy wietlenia naszej listy z wyni-kiem wyszukiwania artystów i utworów z warunkowym wy wietlaniemzale nym od wybranych warto ci tych kontrolek.

3. Wyniki wyszukiwania Echo Nest zawieraj unikatowy identyfikator ele-mentów spe niaj cych wyniki wyszukiwania. Nasz szablon search-resultspowinien zawiera pola link-to, które b d odno nikami do cie ekstworzonych specjalnie w celu wy wietlenia szczegó owych danych natemat artysty (ArtistRoute) oraz utworu (SongRoute). Te cie ki b dgenerowa dodatkowe zapytanie do Echo Nest API, pozwalaj ce po-bra informacje na temat wybranego elementu i przekazuj ce unika-towy identyfikator zwi zany z odno nikiem, jaki u ytkownik kliknw wynikach wyszukiwania.

Uzbrojony w model wygenerowany z odpowiedzi Echo Nest widokArtistView lub SongView powinien wy wietli , pobra obrazki, filmyoraz tekstowy opis elementu z odpowiedzi Echo Nest, a nast pniewype ni nimi szablon artist lub song.





4. Gdy u ytkownik klika wynik wyszukiwania, SearchResultController po-winien zapisa rekord w lokalnym magazynie wraz ze znacznikiem czasui unikatowym identyfikatorem, wy wietlan nazw , typem i ocen hottt-nesss — stosowan wewn trznie przez Echo Nest miar popularno cielementu. Pó niej zajmiemy si zapisywaniem tych danych zdalnie.

Odno nik w g ównym panelu nawigacyjnym powinien prowadziu ytkownika do ActivityRoute oraz szablonu activity, który powinienzawiera komponent wykorzystuj cy D3 do wizualizacji aktywno ciu ytkownika — wszystkich danych pobranych podczas korzystaniaprzez niego z aplikacji. Poniewa b dziemy wizualizowa parametr o na-zwie hotttnesss (z ang. „gor co”), to naszym zdaniem mapa termicznab dzie w a ciwym rozwi zaniem.

Zaczynamy od HTMLJe li interesowa e si cho troch tematem nowoczesnych metodologii two-rzenia stron internetowych, musia e s ysze rozmowy o tym, e tradycyjnesposoby pracy i podej cia trac na znaczeniu. „Kaskadowe” staje si corazbardziej zawstydzaj cym s owem. U yteczno wszystkich wykorzysty-wanych narz dzi i elementów tworzonych podczas prac nad aplikacj jestpodawana w w tpliwo . Na przyk ad szkicowanie projektu dynamicznejaplikacji internetowej w Photoshopie, tworzenie wygl du Twojego serwisudla ró nych szeroko ci i wysoko ci, jakie przegl darka mo e wybra (lubograniczy ), to nieko cz ca si historia. Projektowanie dla idealnych urz dze— wielkich monitorów stacjonarnych i pot nych procesorów — po prostuju nie wystarcza.

Je li to mo liwe, najlepszym rozwi zaniem jest projektowanie w przegl -darce. Je li jeste projektantem, który potrafi napisa wystarczaj c ilokodu HTML i CSS, by zrobi makiet , to wspaniale. Je li jeste deweloperemi musisz wspó pracowa z projektantem, który nie czuje si tak pewniew HTML i CSS, w Twoim najlepszym interesie le y jak najwcze niejszeprzygotowanie i jak najcz stsze aktualizowanie takiej makiety. I to jestjedna ze wspania ych rzeczy przy typowym zastosowaniu Ember: Twojeszablony s pisane w HTML-u.

W przypadku tej aplikacji zamiast rozpoczyna od szkicowania lub rysowaniaprojektów, przygotowali my makiet , wykorzystuj c HTML i CSS. Mimoe pracujemy w tej bran y od wielu lat, by o to dla nas nowe do wiadczenie.

Przez wi kszo czasu nasza praca przypomina a prac podwykonawcyna budowie biegaj cego z planem, m otkiem i mas dodatków. Tym razem




Podstawy Handlebars.js 69

jednak czuli my si bardziej jak rze biarze — poniewa HTML by takplastyczny, e mogli my wszystko dostraja , dopóki nie zacz o wygl datak, jak chcieli my.

Podstawy Handlebars.jsMo esz rozpocz swój projekt, po prostu tworz c najprostszy statycznyHTML. Pó niej wrócisz i wstawisz w odpowiednie miejsca znaczniki, warunkii zmienne Handlebars. Zacznijmy od stworzenia g ównej zawarto ci naszejaplikacji: nag ówka, dost pnej globalnie cz ci tre ci strony oraz stopki.Mo emy po prostu doda kod taki jak poni ej — wykorzystuj cy TwitterBootstrap — bezpo rednio do naszego pliku app/templates/application.hbs:

<div class="wrapper"> <div class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Prze cz nawigacj </span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Rock'n'Roll Call</a> </div>

<div id="navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav search-lockup"> <li class="search-group"> <input class="search-input" placeholder="Nazwa artysty lub utworu"> <button class="btn btn-primary"><i class="glyphicon glyphicon-play"></i></button> </li> </ul> <ul class="nav navbar-nav navbar-right" > <li><a href="#">Aktywno </a></li> </ul>

</div> </div>

<div class="container-fluid" > <div class="row-fluid" >  </div> </div></div><footer> <p>





<i class="glyphicon glyphicon-copyright-mark" ></i> Helion 2015, <em>Ember.js dla webdeveloperów</em> </p> <p> Autorzy: Jesse Cravens <a href="http://twitter.com/jdcravens">@jdcravens</a> i Thomas Q. Brady <a href="http://twitter.com/thomasqbrady">@thomasqbrady</a> </p></footer>

A poniewa nie jest to ksi ka na temat CSS, pójdziemy na skróty i doda-my od razu ca y znajduj cy si w pliku app/styles/style.scss arkusz stylówdla tej strony, a tak e plik graficzny app/images/stage.jpg. Pliki te mo naznale w materia ach do czonych do ksi ki, umieszczonych pod adresem ftp://ftp.helion.pl/przyklady/emberw.zip.

Twitter Bootstrap

Mo e zastanawiasz si , w jaki sposób Twitter Bootstrap znalaz siw Twojej aplikacji. Zosta on dodany przez Yeoman w rozdziale 3.,po tym, gdy po pytaniu:Would you like to include Twitter Bootstrap for Sass?(Y/n)

wybra e Y.

Rysunek 4.1 pokazuje, jak w tym momencie wygl da strona.

Czy powinienem korzysta ze znaczników <script>,czy z plików .hts?

W rozdziale 2. wbudowali my szablony Handlebars w strony HTMLwewn trz znaczników <script> wygl daj cych tak:

<script type="text/x-handlebars" data-template-name="application" > </script>

By o to mo liwe, poniewa korzystali my z pe nej kompilacji Handlebars,która do cza logik w taki sposób, e w czasie dzia ania wyszukuje znacz-niki <script> i konwertuje je na obiekty JavaScript — w rzeczywisto cifabryki — w pami ci (w Em.TEMPLATES, je li Ci to ciekawi), gdzie czekajgotowe do przetworzenia na kod HTML w zale no ci od potrzeb.




Podstawy Handlebars.js 71

Rysunek 4.1. Szkielet naszej strony po dodaniu CSS

Jak mo na sobie wyobrazi , taka konwersja ze znaczników <script> na fa-bryki mo e obci a komputer, szczególnie gdy Twoja aplikacja, a wrazz ni liczba szablonów, b dzie rosn . To dlatego Handlebars pozwalawst pnie kompilowa Twoje szablony i do cza tylko okrojony plikhandlebars.runtime.js, w którym nie ma logiki odpowiedzialnej za kon-wersj , co pozwala zaoszcz dzi czas potrzebny do wyszukiwania sza-blonów oraz ograniczy ilo danych pobieranych przez Twoj aplikacj .

Dzi ki pracy w o onej w przygotowanie Yeoman w rozdziale 2. mo emywykorzysta rajdow wersj Handlebars. Yo wygeneruje nam szablonyHandlebars w oddzielnych plikach z rozszerzeniem .hbs podczas gene-rowania widoków, a Grunt b dzie dla nas pilnowa tych szablonów,kompiluj c je do postaci klas JavaScript i cz c je z reszt kodu JavaScript zaka dym razem, gdy b dziemy zapisywa zmiany.

Musisz jedynie powiadomi Grunt, e chcesz, by pilnowa Twoich szablo-nów Ember, oraz wskaza mu miejsce, w którym si one znajduj , w takisposób:

grunt.initConfig({ yeoman: yeomanConfig, watch: {





emberTemplates: { files: ' <%= yeoman.app %>/templates/**/*.hbs', tasks: ['emberTemplates', 'connect:livereload'] } }})

Odpowiadaj c na pytanie, mo na powiedzie , e nale y korzysta z pli-ków .hbs, gdy tylko jest to mo liwe przy zastosowaniach produkcyjnych.Znaczniki <script> sprawdzaj si przy tworzeniu szkiców lub bardzoma ych zada .

ZmienneMaj c ju stron , która wykonuje to, czego potrzebujemy, i wygl da tak,jak chcemy, mo emy zacz zamienia statyczne elementy na elementyprogramowe, wykorzystuj c Handlebars. Zacznijmy od nazwy naszej aplikacji.Powiedzmy, e chcesz modyfikowa nazw naszej aplikacji tak, by naprzyk ad szwedzkim u ytkownikom wy wietla Rock Upprop. Aby to wy-kona , b dziemy potrzebowali przynajmniej dwóch rzeczy:

1. Musimy u y Handlebars, by wy wietli zmienn w miejscu naszejstatycznej tre ci HTML.

2. Musimy gdzie zdefiniowa t zmienn .

W praktyce definiowanie takiej zmiennej mo e okaza si do skomplikowa-ne. Na razie umie my po prostu zmienn w naszym obiekcie RocknrollcallYeoman. Przy okazji przyjrzyjmy si kodowi JavaScript utworzonemu

przez Yeoman w naszym pliku app/scripts/app.js:var RocknrollcallYeoman = window.RocknrollcallYeoman =Ember.Application.create();

/* Order and include as you please. (Przestawiaj i dodawaj w razie potrzeby.) */require('scripts/controllers/*' );require('scripts/store' );require('scripts/models/*' );require('scripts/routes/*' );require('scripts/views/*' );require('scripts/router' );

Dodajmy tak lini zaraz po wywo aniu Ember.Application.create():RocknrollcallYeoman.applicationName = "Rock'n'Roll Call";




Tworzenie odno ników za pomoc {{link-to}} 73

Pó niej mo emy doda troch wi cej kodu wstawiaj cego do zmiennejtekst w obs ugiwanych j zykach. Wprowadzona tutaj zmiana sprawia, e do-póki b dziemy korzysta z kontrolek Handlebars we wszystkich miejscach,gdzie wy wietlamy nazw naszej aplikacji, dopóty zmiana nazwy naszejaplikacji b dzie wymaga a wprowadzenia modyfikacji w jednym miejscu.

Wró my wi c do naszego szablonu. Teraz mo emy po prostu zmodyfiko-wa lini :

<a href="#" class="navbar-brand">Rock'n'Roll Call</a>

do takiej postaci:<a href="#" class="navbar-brand">{{RocknrollcallYeoman.applicationName}}</a>

Jak ju wcze niej widzieli my, nie ogranicza si to do wstawienia zmiennejpodczas adowania strony. Je li zawarto zmiennej RocknrollcallYeoman.applicationName zmieni si podczas korzystania z aplikacji — na przyk ad je li

u ytkownik zmieni w opcjach wybrany j zyk — zawarto wy wietlanaw tym polu zostanie zaktualizowana automatycznie bez konieczno ci pi-sania dodatkowego kodu ponad to, co ju zosta o napisane.

Tworzenie odno ników za pomoc {{link-to}}Zacznijmy od najprostszego przypadku. Prawdopodobnie zechcemy, bypo klikni ciu logo mo na by o wróci do domy lnego stanu aplikacji, ta-kiego jaki otrzymujemy po wpisaniu w przegl darce podstawowego adresu.Nie utworzyli my jeszcze adnych cie ek ani kontrolerów, ale nie ozna-cza to, e nie zrobi tego Ember. Strona, któr ogl damy w przegl darce,to... zgadniesz? Jest to domy lna cie ka IndexRoute znajduj ca si w do-my lnej ApplicationRoute. Tutaj nasz u ytkownik powinien wpisa tekst dowyszukania i wcisn Enter lub klikn odpowiedni przycisk, co powinnodoprowadzi go do cie ki z wynikami wyszukiwania. Mo e on te kliknodno nik, by zobaczy wizualizacj swojej aktywno ci w wyszukiwarce, copowinno skierowa go do ActivityRoute. Dlatego je li zechce on wróci dostrony, na któr w tej chwili patrzymy, powinien wróci do IndexRoute.Dobrze, to do proste. Zamie znacznik <a> na znacznik link-to Handlebarsw poni szy sposób.

Statyczny HTML:<a href="#" class="navbar-brand" >{{RocknrollcallYeoman.applicationName}}</a>

nale y zmieni na szablon Handlebars:{{#link-to "index" class="navbar-brand"}}{{RocknrollcallYeoman.applicationName}}{{/link-to}}





Prawdopodobnie rozumiesz t sk adni . Nawiasy {{ i }} po prostu zast -puj < i > z HTML-a. Tak samo jak w HTML-u link-to sk ada si ze znacznikaotwieraj cego {{#link-to ...}} oraz znacznika zamykaj cego {{/link-to}}.Wewn trz znacznika otwieraj cego tak jak w HTML-u mo na zadeklaro-wa atrybuty znacznika a, który zostanie umieszczony na stronie, i w tymprzyk adzie zadeklarowali my nazw klasy navbar-brand. Cz , która mo-e Ci zastanawia , to ci g znaków przed t deklaracj nazwy klasy: index.

Podczas gdy w znaczniku HTML deklarujesz cel atrybutem href, w znacz-niku Handlebars link-to przekazujesz nazw cie ki jako pierwszy para-metr. Konwencja nazewnictwa jest prosta, gdy tylko si j zrozumie. Bie-rzesz nazw cie ki (w tym przypadku IndexRoute), zamieniasz pierwszliter na ma , usuwasz ci g Route, wstawiasz minus przed ka d wielkliter oprócz pierwszej, rozdzielasz s owa, je li jest wi cej ni jedno, i zamie-niasz wszystkie litery na ma e. Opis mo e wydawa si skomplikowany,ale ma to sens. Zobaczmy na przyk adach:

cie ka IndexRoute powinna by przekazana do link-to jako index.

cie ka SearchResultsRoute powinna by przekazana do link-to jakosearch-results.

Wszystkie informacje na temat konwencji nazewnictwa mo na znale w roz-dziale „Naming Conventions” przewodnika „Ember Guides” pod adresemhttp://emberjs.com/guides/concepts/naming-conventions/.

Wprowadzanie danych z {{input}}Jak mo esz sobie wyobrazi , zawarto pola input z tekstem do wyszukiwaniab dzie do wa na. W przypadku samego pola input mo liwe jest uzyskaniedost pu do jego zawarto ci, a nawet przechwycenie jego przes ania z pozio-mu samego j zyka JavaScript, ale du o atwiej jest pozwoli zaj si tymHandlebars i Ember. Zast pmy nasz znacznik input znacznikiem Handlebars:

Statyczny HTML:<input class="search-input" placeholder="Nazwa artysty lub utworu" >

nale y zamieni na szablon Handlebars:{{input type="text" class="search-input" placeholder="Nazwa artysty lub utworu"}}

W tym miejscu pole input nie b dzie jeszcze zbyt wiele robi . czeniemjego warto ci oraz zdarzeniem submit zajmiemy si w nast pnym rozdziale.




Wprowadzanie danych z {{input}} 75

Zwró my teraz uwag na wyniki wyszukiwania. Zaczynamy od makietywykonanej w statycznym HTML-u:

<div class="container-fluid" > <div class="row-fluid" > <div class="search-results-wrapper clearfix" > <div class="search-facets col-md-2" > <h3>Pokazuj: </h3> <ul class="facets" > <li> <label>Artystów</label> <input type="checkbox" checked="checked" > </li> <li> <label>Utwory</label> <input type="checkbox" checked="checked" > </li> </ul> </div>

<div class="results col-md-10" > <h3>Arty ci</h3> <ul class="search-results artists" > <li><a href="#" >Tom Waits</a></li> <li><a href="#" >Tom Waits & Keith Richards</a></li> <li><a href="#" >Tom Waits & Keith Richards</a></li> <li><a href="#" >Tom Waits [Vocalist] & Orchestra [Orchestra] & Michael Riesman [Conductor] & Bryars, Gavin [Composer] </a></li> <li><a href="#" >Tom Waits [Vocals] & Gavin Bryars Ensemble [Ensemble] </a></li> <li><a href="#" >Tom Waits [Vocalist]; Orchestra [Orchestra]; Michael Riesman [Conductor] </a></li> <li><a href="#" >Tom Waits [Vocals] & Gavin Bryars Ensemble [Ensemble] & Bryars, Gavin [Composer] </a></li> <li><a href="#" >Tom Waits [Vocalist], Orchestra [Orchestra] & Michael Riesman [Conductor] </a></li> </ul>

<h3>Utwory</h3> <ul class="search-results songs" > <li><a href="#" >"Tom Waits" - Panic Strikes a Chord</a></li> <li><a href="#" >"Tom Waits" - Doug Kuony</a></li> <li><a href="#" >"Tom Waits" - The Moonband</a></li> <li><a href="#" >"Tom Waits" - The Moonband</a></li> <li><a href="#" >"Tom Waits" - Spaghetti Western</a></li> <li><a href="#" >"Tom Waits" - The Passionate & Objective Jokerfan</a></li> <li><a href="#" >"Tom Waits" - Mike Macharyas</a></li> <li><a href="#" >"Tom Waits" - Junkyard Poets</a></li> <li><a href="#" >"Tom Waits" - The Fall of Troy</a></li> <li><a href="#" >"Tom Waits" - Anouk</a></li> </ul> </div>





</div> </div></div>

Na razie dodamy te wyniki do pliku app/templates/index.hbs. Nast pniew pliku app/templates/application.hbs zmienimy lini z komentarzem:



na znacznik handlebars:{{outlet}}

aby wskaza frameworkowi Ember, w którym miejscu nale y wy wietliszablon zwi zany z bie c cie k (index).

Rysunek 4.2 pokazuje wygl d strony w tej chwili.

Rysunek 4.2. Wy wietlony szablon z wynikami wyszukiwania

Ale czym s {{outlet}}, IndexRoute i index.hbs?

Nie wyja nili my jeszcze, jak mo na przechodzi mi dzy ró nymiszablonami. Na razie jednak wystarczy wiedza, e wy wietlamytre ci zwi zane z IndexRoute oraz szablonem index.hbs w miejsce{{outlet}} w szablonie application.hbs. W kolejnym rozdziale omó-wimy tworzenie nowych szablonów, cie ek i czenie wszystkiegoze sob .




Listy z {{each}} 77

Listy z {{each}}Mo liwe, e listy nienumerowane b d pierwszym elementem, w którymkorzy z u ywania szablonów b dzie dla Ciebie oczywista. Handlebarsobs uguje je w bardzo przyjazny sposób. Najpierw zredukujmy ka dz takich list do jednego elementu, a nast pnie zobaczymy, jak zwielokrotniten szablon dla ka dego elementu otrzymanego w wynikach wyszukiwania.Lista artystów w wersji HTML wygl da tak:

<ul class="search-results artists"> <li><a href="#">Tom Waits</a></li></ul>

Istotne jest to, e b dziemy chcieli wykorzysta jeden znacznik ul, taki jaktutaj, ale zechcemy umie ci wi ksz ilo znaczników li wewn trz niego.Handlebars obs uguje znacznik each, który przechodz c przez kolejneelementy tablicy, tworzy co w rodzaju wewn trznego szablonu dla ka -dego elementu tablicy. Zacznijmy od stworzenia prostej tablicy, któr b -dziemy mogli wy wietli . Do pliku app.js dodaj poni sze linie po deklaracjiapplicationName:

RocknrollcallYeoman.dummySearchResultsArtists = [ { id: 1, name: 'Tom Waits', nickname: 'Tommy', type: 'artist', enid: 'ARERLPG1187FB3BB39' }, { id: 2, name: 'Thomas Alan Waits', type: 'artist', enid: 'ARERLPG1187FB3BB39' }, { id: 3, name: 'Tom Waits & Keith Richards', type: 'artist', enid: 'ARMPVNN13CA39CF8FC' }];

Teraz mo emy wykorzysta t tablic w naszym szablonie. Zast p znacz-nik li z kodu HTML znacznikiem each Handlebars w taki sposób:

<ul class="search-results artists"> {{#each RocknrollcallYeoman.dummySearchResultsArtists}} <li><a href="#">{{name}}</a></li> {{/each}}</ul>





Magia, prawda? Nie jest nawet najwa niejsze, e mechanizm ten przetwa-rza nasz zmienn globaln . Cz sto w Ember i Handlebars naprawd ma-giczne rzeczy dziej si , gdy warto zapisana w przekazanej zmiennej —w naszym przypadku globalnej zmiennej dummySearchResultsArtists — ulegazmianie, a Twoja lista automatycznie si aktualizuje.

Zauwa , e kontekst — lub zakres zmiennej — zmienia si wewn trzznacznika each. Do w z a text w naszym znaczniku a odwo ujemy si , poprostu pisz c {{name}}, a nie App.dummySearchResultsArtists[index].name czyco w tym rodzaju. Wewn trz p tli each kontekst wskazuje na bie cy obiektz tablicy i mo esz uzyska dost p do jego w a ciwo ci, odwo uj c si do nichza pomoc nazwy.

Co by by o, gdyby my w ka dym z naszych obiektów dummySearchResultsArtists mieli w a ciwo nicknames, która by aby tablic pseudonimów

u ywanych przez artyst ? Przypu my, e chcieliby my wy wietli wszystkiete pseudonimy w postaci oddzielnych wyników wyszukiwania w takisposób, e „TAFKAP” — „The Artist Formely Known as Prince” — by byoddzielnym elementem w wynikach wyszukiwania. Aby unikn nieporo-zumie , dopiszemy alias [prawdziwe nazwisko lub oryginalna nazwa]. W ko cukto mo e szuka artysty, wpisuj c jego pseudonim i nie wiedz c naweto tym, e jest to pseudonim.

Mog e pomy le , e takie prze czanie kontekstu mo e w takim wypadkunie by zbyt wygodnym rozwi zaniem. Zobaczmy dlaczego. Oto pierwszyelement naszego teoretycznego szablonu (bardzo by my tego chcieli, ale TheEcho Nest nie podaje pseudonimów):

<ul class="search-results artists" > {{#each RocknrollcallYeoman.dummySearchResultsArtists}} {{#each ...

No dobra! Jak mamy odwo ywa si do naszego lokalnego obiektu? Chonie b dziesz tego zbyt cz sto u ywa , mo e nawet nie u yjesz nigdy, oka-zuje si , e mo esz to zrobi w ten sposób:

<ul class="search-results artists"> {{#each RocknrollcallYeoman.dummySearchResultsArtists}} <li><a href="#">{{this.name}}, alias "{{this.nickname}}"</a></li> {{/each}}</ul>

Ale u ycie this tutaj nie wygl da zbyt dobrze, dlatego mamy szcz cie, eHandlebars umo liwia skorzystanie z innej sk adni znacznika each, co po-zwoli nam nazwa zmienn w taki sposób:

<ul class="search-results artists"> {{#each artist in RocknrollcallYeoman.dummySearchResultsArtists}}




Warunki ze znacznikami {{if}} oraz {{else}} 79

<li><a href="#">{{artist.nickname}}, alias "{{artist.name}}"</a></li> {{/each}}</ul>

A je li zechcesz jeszcze bardziej skróci i upro ci , nawet nie musisz u y-wa this ani nazwy zmiennej. Handlebars domy lnie zak ada, e bie cyobiekt modelu z przetwarzanej tablicy jest bie cym kontekstem:

<ul class="search-results artists"> {{#each RocknrollcallYeoman.dummySearchResultsArtists}} <li><a href="#">{{nickname}}, alias "{{name}}"</a></li> {{/each}}</ul>

Teraz jednak trafili my na inny problem. Nasi arty ci z pseudonimami adniesi wy wietlaj , ale arty ci bez pseudonimów nie pojawiaj si wcale. Gdyzajrzymy do kodu, okazuje si , e ma to sens. Je li nie masz tablicy o nazwienicknames, omijasz równie cz kodu. Potrzebujemy czego w rodzajuklauzuli if. Prawdopodobnie nie zaskoczy Ci to, e Handlebars obs ugujetak klauzul .

Warunki ze znacznikami {{if}} oraz {{else}}Spróbujmy najpierw sprawdza , czy wybrany artysta ma jakie pseudo-nimy, i na tej podstawie zadecydujmy, czy wy wietli je w p tli, czy sko-rzysta z prostszego szablonu. Mo e to wygl da tak:

<ul class="search-results artists"> {{#each RocknrollcallYeoman.dummySearchResultsArtists}} {{#if nickname}} <li><a href="#">{{nickname}} alias {{name}}</a></li> {{else}} <li><a href="#">{{name}}</a></li> {{/if}} {{/each}}</ul>

Zamie znacznik <ul> w pliku index.hbs na powy szy kod. Rysunek 4.3 poka-zuje, jak wygl da strona po takiej modyfikacji.

Mo esz zastanawia si , w jakiej sytuacji zawarto atrybutu nicknames jestuznawana za fa sz. Wszyscy oczekujemy takiego wyniku, gdy do tego atry-butu przypisana jest warto podobnego typu: fa sz, null, niezdefiniowana.Co jednak w sytuacji, gdy mamy pust tablic : []? Spokojnie, Handlebarsuzna ka d z tych warto ci za fa sz.





Rysunek 4.3. Nasz szablon wy wietlania wyników z przyk adowymi danymi i kodemzawieraj cym instrukcje warunkowe

Mo esz ju usun kod zwi zany z obs ug pseudonimów, poniewa byon do czony jedynie dla demonstracji. W naszej aplikacji nie b dziemy gou ywa , poniewa korzystamy z API istniej cej us ugi Echo Nest.

Obs uga dzia a u ytkownikaza pomoc {{action}}Znacznik {{action}} s u y do obs ugi zdarze generowanych przez u yt-kownika korzystaj cego z aplikacji. Akcja zostanie przekazana do kontro-lera powi zanego z bie c cie k . Gdy ju sko czymy omawia cie ki,nabierze to wi cej sensu, ale z wprowadzenia w rozdziale 2. powinienezna przynajmniej podstawy.

Najcz stszym przypadkiem jest wykorzystanie akcji do przejmowania zda-rze dotycz cych klikni cia odno nika zwi zanego ze znacznikiem a lubprzycisku:

<button {{action 'robCos'}}>KLIKNIJ MNIE!</button>




Powi zane atrybuty 81

Aby obs u y tak akcj , potrzebujemy odpowiedniego miejsca. Utwórzmywi c IndexController w pliku app/scripts/controllers/index_controller.js:

RocknrollcallYeoman.IndexController = Ember.Controller.extend({});

Tworz c kontroler, w rzeczywisto ci przes aniamy istniej cy IndexController,który Ember wygenerowa dla nas automatycznie. Wi cej informacji natemat automatycznego generowania znajduje si w nast pnym rozdziale.

Mo emy teraz obs u y akcj w bie cym kontrolerze, którym jest w a nieutworzony IndexController, poniewa korzystamy z adresu startowego(http://localhost:9000/). Je li nie wszystko rozumiesz cierpliwo ci; wi cejna temat routingu dowiesz si w rozdziale 5.

RocknrollcallYeoman.IndexController = Ember.Controller.extend({ actions: { viewedArtist: function(artist) { console.log('zaczekaj, przegl dam: ' + artist.name) } }});

Mo emy teraz korzysta ze znacznika a i specjalnie przygotowanych akcji,by przej obs ug klikni naszych u ytkowników w pliku index.hbs w takisposób:

<li><a {{action 'viewedArtist' this }} href="#">{{name}}</a></li>

Wi cej informacji na temat tego, jak obs ugujemy akcje, pojawi si pó niej.W rozdziale 7. napiszemy bardziej szczegó owo, w jaki sposób trwale zapisy-wa dane z takich aktywno ci lokalnie i zdalnie.

Powi zane atrybutyKorzystaj c z naszej dobrej passy, id my dalej. Za ó my, e u ytkownikklikn nazw artysty w wynikach wyszukiwania i przeszed do stronyopisuj cej wskazany element. W nast pnym rozdziale dowiesz si , jakutworzy now cie k opisuj c stan aplikacji i przej do tej cie ki. Tym-czasem popatrzmy na ostateczny szablon i przeanalizujmy, co tutaj wi-dzimy. Do pliku app/templates/artist.hbs dodaj taki kod:

<div class="entity-artist page-container"> <div class="artist-bio-lockup clearfix"> {{#if model.image}} {{#if model.license}} {{#if model.license.url}} <a {{bind-attr href="model.license.url"}}> <img {{bind-attr src="model.image.url"}} class="pull-right"> </a>





{{else}} <img {{bind-attr src="model.image.url"}} class="pull-right"> {{/if}} {{else}} <img {{bind-attr src="model.image.url"}} class="pull-right"> {{/if}} {{/if}} <h3 class="fancy" >{{model.name}}</h3> <h4> {{hotttnesss-badge model.hotttnesss}} </h4> <p class="bio pull-left" >Biografia(from {{model.biography.site}}): {{model.biography.text}}</p> <a {{bind-attr href="model.biography.url"}} class="pull-left">Wi cej informacji</a> </div>

{{#if model.videos.length}} <div class="videos" > <h5>Filmy</h5> {{#each video in videos}} <a {{bind-attr href="video.url" }}><img {{bind-attr src="video.image_url"}} class="video-thumbnail"></a> {{/each}} </div> {{/if}}</div>

Popatrz na powy szy fragment kodu kilka razy. I co? Wida tutaj tylko je-den nowy element Ember. S nim atrybuty bind-attr w szablonie, które sotoczone nawiasami klamrowymi i znajduj si wewn trz znacznikówHTML w miejscu, w którym zazwyczaj znajduj si atrybuty. Jest tak, ponie-wa w ko cu zostan one zamienione na atrybuty. Dyrektywa bind-attrpozwala dynamicznie przypisywa dowolny atrybut HTML z dost pnychzmiennych bie cego kontekstu w czasie dzia ania aplikacji — najcz ciejw modelu, ale mo e by to te co wygenerowanego przez kontroler, wi-dok lub cie k . Sk adnia jest do prosta. Nie jest to znacznik, dlatego niema tutaj cz ci otwieraj cej i zamykaj cej i dlatego te nie ma konieczno ciu ycia znaku # ani zamykaj cego znaku uko nika. Po prostu piszemy:

<[dowolny znacznik] {{bind-attr }}>

Nast pnie wskazujemy, jaki atrybut chcemy wstawi — w tym przypadkuutwórzmy link roboczy:

<a {{bind-attr href=video.url}}>Zobacz na Vimeo</a>

Przygl daj c si naszemu szablonowi, zobaczysz wiele przyk adów uzu-pe niania atrybutów href, atrybutów src obrazków i jeden przyk ad atry-butu data-. Mo esz wykorzystywa dowolne atrybuty w miar potrzeb,




Tworzenie w asnych znaczników 83

w tym atrybut class. Cho atrybut class jest troch bardziej k opotliwy,poniewa cz sto masz wi cej ni jeden i ka dy z nich b dzie musia bypo czony z innymi danymi. Handlebars dostarcza wielu sposobów zarz -dzania mnóstwem kombinacji dynamicznych i statycznych po cze z na-zwami klas, wszystkie s opisane w dokumentacji Ember.js, w rozdziale„Binding Element Class Names” pod adresem http://emberjs.com/guides/templates/binding-element-class-names/.

Zobaczmy teraz, jak mo emy utworzy w asny znacznik, by poprawi kod,którego u yli my wcze niej do wy wietlania oznaczenia hotttnesss.

Tworzenie w asnych znacznikówJak dot d zajmowali my si znacznikami istniej cymi wcze niej w Ember.js,takimi jak np. znacznik Handlebars input. Znacznik input jest w rzeczywisto cido czony do biblioteki Ember.js jako rozszerzenie Handlebars. W chwili pi-sania tego tekstu znajduje si on w linii nr 31 514 w pliku Ember.js1.4.1+pre.af87bd20:

Ember.Handlebars.registerHelper('input' , function(options) { Ember.assert('You can only pass attributes to the `input` helper, not arguments' , arguments.length < 2);

var hash = options.hash, types = options.hashTypes, inputType = hash.type, onEvent = hash.on;

delete hash.type; delete hash.on;

if (inputType === 'checkbox' ) { return Ember.Handlebars.helpers.view.call(this, Ember.Checkbox, options); } else { if (inputType) { hash.type = inputType; } hash.onEvent = onEvent || 'enter' ; return Ember.Handlebars.helpers.view.call(this, Ember.TextField, options); }});

Ciekawe jest to, e mo emy tworzy swoje w asne znaczniki Handlebars,korzystaj c z tego samego wzorca, jaki zosta zastosowany do wykorzy-stania Handlebars jako rozszerzenie. Aby to pokaza , utworzymy znacz-nik hotttnesss, który b dzie wy wietla p omienie oraz liczb odpowiada-j c parametrowi hotttnesss z naszego modelu.





Gdyby my mieli robi to bez tworzenia znacznika, musieliby my dodawiele elementów z ikonami do app/templates/index.hbs w taki sposób:

<h4> Hotness: {{#if model.hotttnesss}} <i class="hotttnesss"> <i class="glyphicon glyphicon-fire hotttnesss0"></i> <i class="glyphicon glyphicon-fire hotttnesss1"></i> <i class="glyphicon glyphicon-fire hotttnesss2"></i> <i class="glyphicon glyphicon-fire hotttnesss3"></i> <i class="glyphicon glyphicon-fire hotttnesss4"></i> <i class="glyphicon glyphicon-fire hotttnesss5"></i> <i class="glyphicon glyphicon-fire hotttnesss6"></i> <i class="glyphicon glyphicon-fire hotttnesss7"></i> <i class="glyphicon glyphicon-fire hotttnesss8"></i> <i class="glyphicon glyphicon-fire hotttnesss9"></i> </i> <span class="hotttnesss-badge" {{bindAttr data-hotttnesss ="model.hotttnesss"}}></span> {{/if}}</h4>

Musieliby my te utworzy styl dla ka dej z tych ikon. Poni ej pokazuje-my jeden taki styl dla hotttnesss0:

h4 .hotttnesss .hotttnesss0 { font-size: 190%; top: -45%; left: -45%; position: absolute; color: #FF0000; direction: rtl; unicode-bidi: bidi-override;}

Tak wi c zamiast do cza wszystkie 10 elementów, mo emy napisaznacznik, który do czy odpowiedni kod HTML, wykorzystuj c informa-cj z modelu. Zrobimy to, zamieniaj c parametr hotttnesss zapisany jakowarto z zakresu od 0 do 1 na warto z zakresu od 1 do 10, by nast pnieutworzy w p tli odpowiedni kod HTML i wy wietli go. Dodaj poni szykod na ko cu pliku app.js:

Ember.Handlebars.helper('hotttnesss-badge', function(value, options) { var h = parseFloat(value); var hotttnesss_num = Math.round(h * 100); var hotttnesss_css = Math.ceil(h * 10) - 1; var html = "<h4>Hotness: "; if (hotttnesss_num > 0) { html += '<i class="hotttnesss">'; for (var i=0; i<hotttnesss_css; i++) { html += '<i class="glyphicon glyphicon-fire hotttnesss'+i+'"></i>'; }




Tworzenie w asnych znaczników 85

html += "</i>"; html += '<span class="hotttnesss-badge">'+hotttnesss_css+'</span></h4>'; } else { html += "0</h4>"; } return new Handlebars.SafeString(html);});

W ko cu musimy te doda w a ciwo hotttnesss do naszych przyk a-dowych danych w app/scripts/app.js:

RocknrollcallYeoman.dummySearchResultsArtists = [ { id: 1, name: 'Tom Waits', type: 'artist', enid: 'ARERLPG1187FB3BB39', hotttnesss: '1' }, { id: 2, name: 'Thomas Alan Waits', type: 'artist', enid: 'ARERLPG1187FB3BB39', hotttnesss: '.89' }, { id: 3, name: 'Tom Waits & Keith Richards', type: 'artist', enid: 'ARMPVNN13CA39CF8FC', hotttnesss: '.79' }];

Mo emy teraz doda znacznik do szablonu w pliku index.hbs i przekazadane z modelu jako pierwszy parametr w taki sposób:

{{hotttnesss-badge hotttnesss}}

Na rysunku 4.4 mo na zobaczy , jak wygl da w tej chwili strona.

I w ko cu si uda o. Nie tylko ograniczyli my si do potrzebnego kodu,ale upro cili my te nasz szablon do jednej deklaracji znacznika.

Takie dane bardziej pasuj do strony wy wietlaj cej szczegó owe informa-cje, do której mo emy przej , gdy chcemy dowiedzie si wi cej na tematwybranego elementu z wyników wyszukiwania. W nast pnym rozdzialeprzygotujemy te widoki i wtedy przeniesiemy znacznik Hotness na stronyopisuj ce utwór oraz artyst .





Rysunek 4.4. Znacznik Hotness

PodsumowanieZrób sobie chwil przerwy i pomy l o tym, co do tej pory zrobili my. Na-pisali my zdecydowan wi kszo kodu HTML dla naszej witryny, przyczym du cz w taki sposób, e kod jest tworzony dynamicznie, wsta-wiane s dane modelu, warunkowo wy wietlane mog by cz ci szablonu,a nawet w p tlach przetwarzane s tablice z modelu.

Zastanów si te nad tym, jakiego rodzaju prac wykonali my. Wi kszcz tej pracy móg by wykona dowolny cz onek zespo u bez specjalnychkwalifikacji. Ka dy, kto potrafi edytowa HTML, móg by wykona wi kszopracy, a bardzo mo liwe, e po w o eniu odrobiny wysi ku i nauczeniusi , jak nale y korzysta ze zmiennych, po czonych atrybutów oraz instrukcjiwarunkowych, ten sam cz owiek móg by wykona ca opisan w tymrozdziale prac bez Ciebie. Czy nie jest to pot ne narz dzie?

Wiedz c ju to wszystko, przejd my do rzeczy, którymi b dziesz si zajmo-wa , gdy Twoi praktykanci b d przygotowywa kod HTML. Trzeba utwo-rzy prawdziwe modele oraz sprawi , by zapisane w nich dane w ko cupojawia y si w szablonach. W rozdziale 5. przyjrzymy si routerom i pro-stym modelom, by dowiedzie si , jak to zrobi .




194 Skorowidz

Skorowidz

.NET MVC, 143@toranb, 143

AActive Model Serializers, 42adapter, 143

FixtureAdapter, 135, 136LocalStorageAdapter, 136, 138, 145RESTAdapter, 135, 144, 145

adresIP, 31URL, 31, 35, 38, 87, 88, 89

Ajax, 20, 123akcja, 80, 81, 110

index, 155, 160animacja, 169Apache, 29aplikacja, 66

debugowanie, 57desktopowa, 16, 17Ember, 52inicjalizacja, 137inicjator, 137, 138, 140internetowa, 16, 17, 35jednostronicowa, Patrz: SPAkompilacja, 55Ruby on Rails, Patrz: Ruby on Railsserializacja stanu, 87testowanie, 56uruchamianie, 55zarz dzaj ca list zada , 65

application initializer, Patrz: aplikacjainicjator

BBackbone.js, 87baza danych, 162

migracja, 160testowa, 157zdalna, 144

bibliotekaD3.js, 169Ember.js, 51ORM, 127po stronie klienta, 127RSVP.js, Patrz: RSVP

b d, 179obs uga, 126wyszukiwanie automatyczne, 54

Bower, 45, 53, 136

CChrome, 57

panel konfiguracyjny, 87CoffeeScript, 54Compass, 54

instalowanie, 46computed property, Patrz: w a ciwo

generowanaCORS, 185, 186CSS, 68

Ddane

baza, Patrz: baza danychczenie dwukierunkowe, 34

magazyn, Patrz: magazyn danychdeserializacja, 88, 123, 135




Skorowidz 195

detektor zdarze , 110Django, 143dyrektywa Handlebars, 29dziedziczenie, 23

EEAK, 42, 145, 146, 175, 176, 179, 187

makieta API, 145Echo Nest, 98, 99, 102, 103, 120

API, 104EcmaScript 6, Patrz: ES6Ember, 23, 24, 36, 51, 143

dokumentacja API, 95instalowanie, 27, 47komponent, 165, 166, 168

nazwa, 166konwencja nazw, 59uruchamianie, 48zalety, 24

Ember App Kit, Patrz: EAKEmber CLI, 43, 146Ember Data, 43, 61, 126, 127,

130, 143, 184odczyt, 160

Ember Data Store, 134Ember Generator, 41Ember Guides, 176Ember Inspector, 57, 59, 61, 140Ember Model, 127Ember Persistence Fundation,

Patrz: EPFEmber Rails, 42Ember Tools, 42, 43Ember.Observable, 113Ember-Qunit, 189, 190Enid, 98EPF, 127ES6, 43, 101, 147ES6 Module Transpiler, 42, 43Express.js, 26, 144, 145

Ffabryka, 70, 71Fielding Roy, 144Firebase, 143

Firefox, 57FIXTURES, 191, 192Florence Ryan, 136formularz, 33funkcja

click, 181currentPath, 181currentRouteName, 181currentURL, 181fillIn, 181find, 181, 182finds, 182getJSON, 126keyEvent, 181moduleFor, 189, 190moduleForComponent, 189moduleForModel, 189, 193pomocnicza, 181test, 182triggerEvent, 181visit, 181, 182

Ggem, 151, 153gemset, 151Git, 43, 44GitHub, 43Grails, 143Grunt, 45, 46, 54

HHistory API, 87HTML, 68HTTP, 16, 17Hypertext Transport Protocol,

Patrz: HTTP

I, JiCloud, 16implementacja, 21IndexRoute, 76interfejs u ytkownika wid et, 23jquery -rails wersja, 159




196 Skorowidz

KKatz Yehuda, 88komentarz, 32

klauzula build, 51kontroler, 22, 34, 60, 81, 90, 107, 108,

114, 155nazwa, 97Rails, 154rozszerzanie, 114

Llista nienumerowana, 77LiveReload, 54localhost, 32

Mmagazyn danych, 134, 138, 140mapa, 90, 92

domy lna, 92termiczna, 169

mapowanie obiektowo--relacyjne, 25

metoda.get, 113.set, 113all, 134didInsertElement, 170draw, 170filter, 134find, 134findAll, 125get, 125getById, 134getJSON, 102, 116initialize, 137model, 97, 100, 101, 102, 103, 113,

115, 116pomocnicza, 177render, 170set, 125setupController, 114transitionTo, 129

MobileMe, 16

model, 21, 88, 90, 99, 155tworzenie, 129

model-view-router-controler,Patrz: MVRC

moduActiveModel::Serializers, 160adapters/application, 147cors, 185

MVC, 155MVC Rails, 150MVRC, 36

Nnag ówek, 69Nginx, 29Node Package Manager, Patrz: NPMNode.js, 26NPM, 45

Oobiekt, 21

App.name, 33Application, 32, 34JavaScript, 70JSON, 123localStorage, 136okna, 177Promise, 102tworzenie, 100window.isolatedContainer, 177window.startApp, 177

obietnica, 101, 102, 113, 116, 126object relational mapper, Patrz: ORMobject-oriented programming, Patrz: OOPobrazu optymalizacja, 54odno nik URL, Patrz: adres URLOOP, 22ORM, 25

Ppami

podr czna manifest, 54wyciek, 19




Skorowidz 197

PHP, 143plik

bower.json, 53, 136Gemfile, 153Gruntfile.js, 54Handlebars.js, 69handlebars.runtime.js, 71index.html, 51public/index.html, 154statyczny, 35

polecheckbox, 118input, 33, 74, 109wprowadzania danych, 33

poleceniepython -m SimpleHTTPServer, 30QUnit, 177

procedura obs ugikontrolera, 93cie ki, 93

programowanie obiektowe, Patrz: OOPpromise, Patrz: obietnicaprotokó

bezstanowy, 17HTTP, 17, Patrz: HTTPtransportowy, 126WebSocket, Patrz: WebSocket

prototyp, 23, 107Python, 30

QQUnit, 175, 179, 182

Rrefaktoryzacja, 115relacja model, 126REpresentational State Transfer, Patrz:

RESTREST, 144, 150, 154RESTAdapter, 143RESTless, 127router, 34, 35, 88, 90, 148, 162

tworzenie, 128routing, 87, 90RSVP, 102

Ruby instalowanie, 46Ruby on Rails, 25, 34, 144, 145, 150, 154

instalowanie, 151Ruby Version Manager, Patrz: RVMRVM, 150

S, Sass, 54SDK, 23segment dynamiczny, 96, 110serializacja, 88, 111, 123, 135, 161serializer, 135

aktywno ci, 161typu, 135

serwerApache, Patrz: Apachedo zastosowa deweloperskich, 30Nginx, Patrz: Nginxtestowy, 54

Sinatra, 143single-page application, Patrz: SPAsoftware development kit, Patrz: SDKSPA, 20, 155SproutCore, 16, 23stan, 107

matryca, 87serializacja, Patrz: aplikacja

serializacja stanucie ka, 87

stopka, 69strony prze adowanie, 18, 19szablon, 76, 90

Handlebars, 71, 74nazwa, 97tworzenie, 166

cie ka, 35, 60, 87, 90, 91, 97, 129ApplicationRoute, 92debugowanie, 91domy lna, 92

IndexRoute, 73dynamiczna, 96, 110IndexRoute, 92nazwa, 92ledzenie, 91

tworzenie, 93, 94




198 Skorowidz

Ttablica, 77

pusta, 79TDD, 179test, 56, 156, 161, 175

integracyjny, 181jednostkowy, 187, 191

modeli, 192cie ek, 190

negatywny, 179tworzenie, 176

test-driven development, Patrz: TDDTestem, 175, 179testowanie, 175

jednostkowe, 176scenariusz, 176strony g ównej, 182ustawienie modu ów, 189

The Echo Nest, 67TodoMVC, 66Travis, 143TurboLinks, 153Twitter Bootstrap, 69, 70

U, VURL, 89, 97, Patrz te : adres URLus uga

sieciowa, 67zewn trzna, 99

view, Patrz: widok

Wwarunek if, 79WebSocket, 126, 143widok, 22, 90, 107, 120, 155

nazwa, 97tworzenie, 120

w a ciwo generowana, 111, 112wywo anie zwrotne, 19, 94wzorzec projektowy, 21

XXHR, 18, 20XML, 20

XMLHTTPRequest, Patrz: XHR

YYeoman, 41, 45, 70, 136

instalowanie, 45Yo, 45, 46

Z, zadanie lista, 65zdarzenie, 107

detektor, Patrz: detektor zdarzeklikni cie, 121onReady, 138zewn trzne, 138

zmiennadefiniowanie, 72globalna, 78

tworzenie, 32zakres, 78

znacznik{{action}}, 80{{else}}, 79{{if}}, 79a, 73action, 110doctype, 51each, 77, 78Ember.Checkbox, 117h2, 33input, 117li, 77link-to, 73otwieraj cy, 74script, 32, 70, 71testowy, 175tworzenie, 83ul, 77, 79zamykaj cy, 74

znak{{ }}, 74diakrytyczny, 33

danieprzes ania danych, 18XMLHttpRequest, 185




O autorachJesse Cravens jest g ównym in ynierem sieciowym w firmie frog, gdziewspó pracuje z wiod cymi wiatowymi firmami, pomagaj c im w projekto-waniu, przygotowaniu i wprowadzaniu na rynek wa nych produktów i us ug.Ma du e do wiadczenie w tworzeniu aplikacji internetowych, a ostatnioskupi si na architekturze jednostronicowych aplikacji internetowych, stro-nach internetowych dla urz dze mobilnych oraz j zyku HTML5. Jegopierwsza ksi ka, HTML5 Hacks (O’Reilly, 2012), zosta a przet umaczonana wiele j zyków, w tym chi ski i japo ski. Jesse wyst powa te na wielumi dzynarodowych konferencjach, takich jak SXSW Interactive, Fluent Conf,Future Insights, Code PaLOUsa i Øredev.

Wcze niej zajmowa stanowiska starszego programisty i mened era tech-nicznego w USAA, gdzie zarz dza zespo em deweloperów aplikacji mo-bilnych w zakresie planowania, projektowania, programowania, testowania,wdra ania i utrzymania wiod cych w swojej bran y aplikacji mobilnychUSAA dzia aj cych na platformach iOS, Android, Blackberry oraz mobilnychstron internetowych dla o miu milionów cz onków USAA z ca ego wiata.

Jesse posiada tytu licencjata (B.A.) Rice University oraz dyplom magistraUniversity of Texas w San Antonio w dziedzinie rozwoju technik nauczania(Curriculum and Instruction).

Informacje na jego temat mo esz znale na jego stronie internetowej podadresem http://jessecravens.com lub na Twitterze, @jdcravens.

Thomas Q Brady zacz przygod z komputerami tak jak wielu innych, jakodziecko, od komputera Commodore (ale Vic 20, nie 64). Bardzo wcze nienauczy si z ksi ki do czonej do komputera j zyka BASIC, a nast pniedziwnymi cie kami dotar do Visual Basica i innych j zyków u ywanychw technologiach sieciowych, przez co kolejne hobby, mimo uzyskania wy-kszta cenia psychologicznego i filozoficznego, przekszta ci y si w karier .Thomas jest autorem desktopowych i mobilnych aplikacji oraz aplikacjiinternetowych dla klientów takich jak Harvard Business School Publishing,Disney czy Standard and Poor’s.

Od marca 2014 roku Thomas pracuje jako dyrektor technologiczny w Reac-tion, Inc.

Thomas bloguje na Bash Modern Quantity (http://bashmodernquantity.com/)i tweetuje jako @thomasqbrady.


asedzielewski

Prostokąt



http://program-partnerski.helion.pl

Documents

Tytuł oryginału: Building Web Apps with Ember - Helionpdf.helion.pl/emberw/emberw.pdf · 2021. 2. 7. · Obietnice, obietnice 101 Metoda model() 102 ... miaäo równie tempo ycia