Návod k aplikaci Backbone.js Část 2:Pohledy a šablony – Video tutoriál

V naší video sérii výukových programů, které vás provedou procesem psaní aplikace Backbone.js, postupujeme přímo vpřed. Dnes se podíváme na pohledy a vložené šablony. Je zde řada pohledů, všechny vycházejí ze stejných modelů a kolekcí vín. Uvidíte každý pohled, k čemu slouží a jak funguje. Proklikejte se pro tento dlouhý pohled na zobrazení a šablony Backbone.js.

Než se podíváte na video, je tu pár věcí, které jsem objevil při nahrávání a po nahrávání, na které bych vás chtěl upozornit. Nejprve jsem si uvědomil, že jsem zapomněl zvětšit velikost písma editoru, aby bylo lépe vidět na malých obrazovkách, takže to určitě budete chtít sledovat na celé obrazovce na jiném než mobilním zařízení. Dále tu byl řádek kódu, který byl párkrát použit ve wine-list.js, který jsem se rozhodl refaktorovat do jeho vlastní funkce. Konečně, jak zmiňuji ve videu $(this.el) lze vyměnit za this.$el , která je rychlejší, protože je již uložena v mezipaměti. Tyto změny můžete vidět v kódu uvedeném pod videem.

Jen pro poznámku, až skončím s celým tímto projektem, umístím veškerý kód na GitHub, aby si ho každý mohl stáhnout a zobrazit.

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

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<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 type="text/javascript" src="js/libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/libs/underscore-min.js"></script>
<script type="text/javascript" src="js/libs/backbone-min.js"></script>

<script src="js/utils.js"></script>
<script src="js/models/wine-model.js"></script>
<script src="js/views/header.js"></script>
<script src="js/views/wine-list.js"></script>
<script src="js/views/wine-details.js"></script>
<script src="js/main.js"></script>

<script type="text/template" id="header-template">
<button class="new">New Wine</button>
</script>

<script type="text/template" id="wine-details-template">
<div class="form-left-col">
<label>Id:</label>
<input id="wineId" name="id" type="text" value="<%= id %>" disabled />

<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>

<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>

<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>

<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>

<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>

<button class="save">Save</button>
<button class="delete">Delete</button>
</div>

<div class="form-right-col">
<img height="300" src="images/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>

<script type="text/template" id="wine-list-item-template">
<a href='#wines/<%= id %>'><%= name %></a>
</script>

</body>
</html>

Kód JavaScript

1
2
3
4
5
6
7
8
9
10
Backbone.View.prototype.close = function() {
console.log( 'Closing view ' + this );

if ( this.beforeClose ) {
this.beforeClose();
}

this.remove();
this.unbind();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.HeaderView = Backbone.View.extend({

initialize: function() {
this.template = _.template( $('#header-template').html() );
},

render: function() {
this.$el.html( this.template() );

return this.el;
},

events: {
"click .new" : "newWine"
},

newWine: function() {
app.navigate('wines/new', true);

return false;
}
});
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
window.WineListView = Backbone.View.extend({

tagName: 'ul',

initialize: function() {
this.model.bind( 'reset', this.render, this);
this.model.bind( 'add', this.appendNewWine, this);
},

render: function() {
_.each( this.model.models, function( wine ) {
this.appendNewWine( wine );
}, this);

return this.el;
},

appendNewWine: function( wine ) {
this.$el.append(new WineListItemView({model:wine}).render());
}

});

window.WineListItemView = Backbone.View.extend({

tagName: 'li',

initialize: function() {
this.template = _.template( $('#wine-list-item-template').html() );

this.model.bind( 'change', this.render(), this);
this.model.bind( 'destroy', this.close(), this);
},

render: function() {
this.$el.html( this.template( this.model.toJSON()));

return this.el;
}

});
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
window.WineView = Backbone.View.extend({

initialize: function() {
this.template = _.template( $('#wine-details-template').html() );

this.model.bind( 'change', this.render, this);
},

render: function() {
this.$el.html( this.template(this.model.toJSON()));

return this.el;
},

events: {
'click .save': 'saveWine',
'click .delete': 'deleteWine',
},

saveWine: function() {
this.model.set({
name: $('#name').val(),
grapes: $('#grapes').val(),
country: $('#country').val(),
region: $('#region').val(),
year: $('#year').val(),
description: $('#description').val()
});

if ( this.model.isNew() ) {
var self = this;

app.wineList.create( this.model, {
success: function() {
app.navigate( 'wines/' + self.model.id, false);
}
});

} else {
this.model.save();
}

return false;
},

deleteWine: function() {
this.model.destroy({
success: function() {
alert('Wine was deleted successfully');
window.history.back();
}
});

return false;
}

});

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

Zabalení

Doufám, že se všichni učíte. Vím, že to není přesně způsob, jak by někdo postupoval při vytváření webové aplikace, ale je to logický způsob, jak vám věci ukázat – i když ne jediný logický způsob. Těším se na další dílek této skládačky, stejně jako doufám, že vy také. Bůh žehnej a šťastné kódování!