logo

Návod k páteřní aplikaci Část 4:Žije! - Video tutoriál

Dostali jsme se do části 4 této série průvodců aplikacemi Backbone. Tentokrát jsme konečně dostali aplikaci, aby dělala něco, co stojí za to... jako je práce! Aplikace konečně žije, když implementujeme router a stiskneme tlačítko „GO“. Podívejte se na výkon routeru a nezapomeňte, že to, že běží, neznamená, že jsme skončili. Další a poslední video v této sérii převádí aplikaci pro práci s AMD a RequireJS.

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 JavaScript

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
71
72
73
74
75
76
77
78
79
 
Backbone.View.prototype.close = function(listitem) {
    console.log( 'Closing view ' + this );

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

    this.remove();
    this.unbind();
}

var AppRouter = Backbone.Router.extend({

    initialize: function () {
        $('#header').html(new HeaderView().render());
    },

    routes: {
        "": "list",
        "wines/new": "newWine",
        "wines/:id": "wineDetails"
    },

    list: function () {
        this.before(function () {
            this.showView('#content', new StartView());
        });
    },

    wineDetails: function (id) {
        this.before(function () {
            var wine = this.wineList.get(id);
            this.showView('#content', new WineView({
                model: wine
            }));
        });
    },

    newWine: function () {
        this.before(function () {
            this.showView('#content', new WineView({
                model: new Wine()
            }));
        });
    },

    showView: function (selector, view) {
        if (this.currentView) this.currentView.close();

        $(selector).html(view.render());
        this.currentView = view;

        return view;
    },

    before: function (callback) {
        if (this.wineList) {
            if (callback) callback.call(this);
        } else {
            this.wineList = new WineCollection();
            var self = this;
            this.wineList.fetch({
                success: function () {
                    var winelist = new WineListView({
                        model: self.wineList
                    }).render();
                    $('#sidebar').html(winelist);
                    if (callback) callback.call(self);
                }
            });
        }
    }

});

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item', 'start'], function () {
    app = new AppRouter();
    Backbone.history.start();
});

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

Je to naživu!

Ano, tato aplikace je technicky dokončena a běží přesně tak, jak má být, ale ještě jsme neskončili. Způsob, jakým je Backbone.js vytvořen, umožňuje jeho snadnou konverzi pro práci s AMD a RequireJS, takže v dalším videu uvidíte, jak se to dělá. Poté po tomto videu projdeme hlasováním a začneme vytvářet články na vaše oblíbená témata. Bůh žehnej a šťastné kódování!