Úvod do Backbone.js Část 5:AJAX – Video tutoriál

Každý má rád AJAX. Před několika lety to bylo pravděpodobně největší buzz slovo v celém vývoji webu. Nyní HTML5 a CSS3 ukradly show, ale AJAX nyní zaujal své místo jako prvotřídní občan mezi nástroji pro vývoj webu - a konkrétně JavaScript. A aby to bylo ještě lepší, Backbone.js má vestavěnou podporu pro AJAX a zjednodušuje vám jeho použití k synchronizaci vašich modelů s databází, jak uvádím v tomto výukovém videu.

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 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

Backbone.emulateHTTP = true; // Use _method parameter rather than using DELETE and PUT methods
Backbone.emulateJSON = true; // Send data to server via parameter rather than via request content

var Person = Backbone.Model.extend({
    initialize: function() {
        this.on('all', function(e) { console.log(this.get('name') + " event: " + e); });
    },
    defaults: {
        name: 'undefined',
        age: 'undefined'
    },
    urlRoot: "/backbone.php",
    url: function() {
        var base = this.urlRoot || (this.collection && this.collection.url) || "/";
        if (this.isNew()) return base;

        return base + "?id=" + encodeURIComponent(this.id);
    }
});

var person = new Person({id:1});
person.fetch(); // fetch model from DB with id = 1

person = new Person({name:"Joe Zim", age:23});
person.save(); // create and save a new model on the server, also get id back and set it

person = new Person({id:1, name:"Joe Zim", age:23});
person.save(); // update the model on the server (it has an id set, therefore it is on the server already)
person.destroy(): // delete the model from the server

var People = Backbone.Collection.extend({
    initialize: function() {
        this.on('all', function(e) { console.log("People event: " + e); });
    },
    model: Person,
    url: "/backbone.php"
});

var people = new People();
people.fetch(); // Get all models for this collection
people.create({name:"Joe Zim", age:23}); // Create model, add to Collection and add to DB
people.create({id:6, name:"Chuck Norris", age:72}); // Update model: add to Collection, update DB

Databáze a skript PHP

Dostal jsem požadavek na PHP skript, který byl použit v ukázce pro video, takže jsem ho zahrnul – spolu s SQL exportem databáze MySQL – přímo sem, abyste si mohli udělat nějaké vlastní experimenty. Užívat si! Stáhněte si PHP a SQL

Závěr Backbone.js AJAX a Whole Backbone.js Tutorial Series

To je vše, co je k této sérii výukových programů Backbone.js, ale nezapomeňte se vrátit za několik týdnů, až začnu se sérií ukazující krok za krokem, jak používat Backbone.js k vytvoření plné aplikace. Šťastné kódování!

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