logo

Úvod do Backbone.js Část 2:Zobrazení – Video tutoriál

Minulý týden jste viděli video tutoriál o používání Modelů v Backbone.js. Tento týden jsme se přesunuli přímo k části 2:učení o zobrazeních v Backbone.js. Jako obvykle, Backbone.js udělal věci super jednoduchými, přesto dostanete hodně za to, jak málo kódu napíšete. Uvidíte, jak připojovat události (super snadné) a využívat modely (také velmi snadné), abyste svým zobrazením poskytli data, se kterými můžete pracovat.

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
26
27
 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Learning About Backbone.js Views</title>
    <style type="text/css">
        #container { padding:20px; border:1px solid #333; width:400px; }
        #list-template { display:none; }
    </style>
</head>
<body>

<div id="container">
    <button>Load</button>
    <ul id="list">
    </ul>
</div>

<div id="list-template">
<li><a href=""></a></li>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/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
19
20
21
22
23
24
25
26
27
 
model = new Backbone.Model({
    data:[
        { text: "Google", href: "http://google.com" },
        { text: "Facebook", href: "http://facebook.com" },
        { text: "Youtube", href: "http://youtube.com" }
    ]
});

var View = Backbone.View.extend({
    initialize: function () {
        this.template = $('#list-template').children();
    },
    el: '#container',
    events: {
        "click button": "render"
    },
    render: function() {
        var data = this.model.get('data');

        for (var i=0, l=data.length; i<l; i++) {
            var li = this.template.clone().find('a').attr('href', data[i].href).text(data[i].text).end();
            this.$el.find('ul').append(li);
        }
    }
});

var view = new View({ model: model });

Závěr

Soudě podle komentářů zveřejněných v úvodním příspěvku k těmto výukovým programům se zdá, že lidé chtějí vidět celou sérii, a tak jsem se rozhodl, že oba příspěvky příštího týdne budou v této sérii pokračovat dalšími videonávody. Pak si dám pauzu na jeden nebo dva příspěvky, než vás provedu kompletní aplikací Backbone.js.

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