Návod k aplikaci Backbone.js Část 3:Nové zobrazení a externí šablony – Video tutoriál

Přesuneme-li se do části 3 video série Backbone Application Walkthrough, pracujeme na přesunutí všech šablon do externích souborů, abychom snížili závislost na šablonách obsažených v souboru index.html a aby mohly být dostupné, pokud je použijeme. zobrazení na různých stránkách. Také jsem přidal další pohled, který v původní aplikaci nebyl, protože, jak uvidíte ve videu, dělá věci trochu hezčími.

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

Umístím sem jen část kódu, protože to opravdu nemá cenu zveřejňovat celý. První řádek vám říká, o jaký soubor se jedná.

1
2
3
4
5
6
7
8
9
10
11
12
13
window.StartView = Backbone.View.extend({

initialize: function() {
this.template = _.template( tpl.get('start-template') );
},

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

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
tpl = {

// Hash of preloaded templates for the app
templates:{},

// Recursively pre-load all the templates for the app.
// This implementation should be changed in a production environment. All the template files should be
// concatenated in a single file.
loadTemplates:function (names, callback) {

var that = this;

var loadTemplate = function (index) {
var name = names[index];
console.log('Loading template: ' + name);
$.get('templates/' + name + '.html', function (data) {
that.templates[name] = data;
index++;
if (index < names.length) {
loadTemplate(index);
} else {
callback();
}
});
}

loadTemplate(0);
},

// Get template by name from hash of preloaded templates
get:function (name) {
return this.templates[name];
}

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

tpl.loadTemplates(['header', 'wine-details', 'wine-list-item', 'start'], function () {
... // Run App
});

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

Pohled do budoucna

Jak jsem uvedl ve videu, z této série by měla zbýt ještě 2 videa. Další bude dokončení aplikace a její spuštění. Následující bude spíše návodem RequireJS než čímkoli jiným, ale ukáže vám, jak zajistit, aby vaše páteřní aplikace fungovaly s AMD. Čtvrtý díl by měl vyjít tento čtvrtek, tak se na něj těšte. Bůh žehnej a šťastné kódování!