logo

Návod k aplikaci Backbone.js Část 1:HTML a modely – Video tutoriál

Konečně nastal den, na který všichni dlouho čekali. Právě jsem začal s první částí série příspěvků, které se zabývají tím, jak vytvořit skutečnou aplikaci pomocí Backbone.js JavaScript MVC frameworku. Tímto prvním kouskem skládačky pokrývám strukturu aplikace a začnu s nějakým HTML plus kódem JavaScript modelu a kolekce. Pojďme se na to podívat!

Seriál výukových videí Backbone.js

  • Backbone.js Část 1:Modely
  • Backbone.js, část 2:Zobrazení
  • Backbone.js, část 3:Směrovače
  • Backbone.js, část 4:Kolekce
  • Backbone.js, část 5:AJAX
  • Páteřní průvodce aplikací, část 1:HTML a modely
  • Průvodce základní aplikací, část 2:Zobrazení a šablony
  • Návod na základní aplikaci, část 3:Nové zobrazení a externí šablony
  • Návod na základní aplikaci, část 4:Žije!
  • Návod na základní aplikaci, část 5:RequireJS

Konečný kód HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>

<div id="header"></div>

<div id="sidebar"></div>

<div id="content">
    <h2>Welcome to Backbone Cellar</h2>
    <p>This is a sample application designed to teach people with the basic knowledge of Backbone.js how to use it in a real application.</p>
</div>

<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/underscore-min.js"></script>
<script src="js/libs/backbone-min.js"></script>

</body>

</html>

Konečný kód JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
window.Wine = Backbone.Model.extend({
    urlRoot: "wines/",
    defaults: {
        "id":null,
        "name":"",
        "grapes":"",
        "country":"USA",
        "region":"Wisconsin",
        "year":"",
        "description":"",
        "picture":""
    }
});

window.WineCollection = Backbone.Collection.extend({
    model: Wine,
    url: "wines/"
});

Závěr

To je pro tuto první část průvodce aplikací vše. Jsem nadšený a těším se na dokončení této série, stejně jako jsem si jistý, že vy také. Pokud další díl tento čtvrtek neuvidíte, rozhodně ho očekávejte do pondělí. V tom videu bychom měli začít vidět něco ze skutečné práce, takže zůstaňte naladěni. Bůh žehnej a šťastné kódování!