Rámce MVC na straně klienta se staly stále populárnějšími s rostoucí složitostí webových aplikací v prohlížeči. Tyto rámce umožňují organizovat váš JavaScript pomocí osvědčeného vzoru MVC. Backbone.js je jedním z nejpopulárnějších a rychle se stává volbou při zvažování takového rámce.
Dnes vytvoříme formulář pro výběr služeb s Backbone.js, který vám umožní vybrat sadu položek ze seznamu. Pole celkové ceny bude vypočítáno v reálném čase s celkovou cenou služeb.
Co je Backbone.js?
Backbone.js je knihovna, která dává strukturu webovým aplikacím tím, že poskytuje modely, kolekce a pohledy, vše propojené s vlastními událostmi. Připojí vaši aplikaci k vašemu backendu prostřednictvím rozhraní RESTful JSON a může automaticky načítat a ukládat data. V tomto tutoriálu nebudeme používat pokročilé funkce knihovny – vše bude uloženo na straně klienta. Páteř nenahrazuje a nezávisí na jQuery, ale tyto dva spolu dobře spolupracují.
Páteř však vaše problémy zázračně nevyřeší – stále musíte být chytří ve způsobu, jakým organizujete svůj kód, což může být problém, pokud nemáte předchozí zkušenosti s frameworky MVC. Páteř může být také overkill pro menší aplikace, kde by stačilo pár řádků jQuery, takže by bylo lepší nechat na velké základny kódu. Aplikace, kterou zde budujeme, je v prvním táboře, ale ukazuje základní koncepty rámce.
HTML
Začínáme s běžným HTML5 dokumentem. Nepřidal jsem HTML5 shim, takže to nemusí vypadat dobře ve starších IE:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Your first Backbone.js App | Tutorialzine </title> <!-- Google web fonts --> <link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel='stylesheet' /> <!-- The main CSS file --> <link href="assets/css/style.css" rel="stylesheet" /> </head> <body> <form id="main" method="post" action="submit.php"> <h1>My Services</h1> <ul id="services"> <!-- The services will be inserted here --> </ul> <p id="total">total: <span>$0</span></p> <input type="submit" id="order" value="Order" /> </form> <!-- JavaScript Includes --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script src="assets/js/script.js"></script> </body> </html>
Hlavním prvkem na stránce je formulář. UL uvnitř bude vyplněno položkami LI pro služby a rozpětí uvnitř #total odstavec bude držet cenu.
Před uzavírací značku