Exemple de programme Hello World de Backbone.js_Others

header('Content-Type: application/json; charset=utf-8');
die(json_encode(array('name'=>'tom')));

Nouveau document

// Il s'agit d'une classe globale qui gère les vues/contrôles/modèles
var App = {
Modèles : {},
Vues : {},
Contrôleurs : {},
Collections : {},
initialiser : fonction() {
nouveau App.Controllers.Routes();
Backbone.history.start() // Pour piloter tous les programmes Backbone, Backbone.history.start() est nécessaire.
>
};
App.Models.Hello = Backbone.Model.extend({
URL : fonction() {
            return '/api.php'; // Récupère l'adresse backend des données.
},
initialiser : fonction() {
This.set({'message':'hello world'}); // Le front-end définit un champ de message et le champ de nom est fourni par le back-end.
>
});
App.Views.Hello = Backbone.View.extend({
el: $("corps"),
modèle : $("#hello-container-template").html(),
initialiser : fonction(options){
this.options = options;
this.bind('change', this.render);
this.model = this.options.model;
},
render: function(){ // La méthode render n'a que deux objectifs : remplir this.el et renvoyer this pour les opérations en chaîne.
$(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );
rends ça
>
});
App.Controllers.Routes = Backbone.Controller.extend({
itinéraires : {
"!/hello" : "hello",//Utilisez #!/hello pour piloter le routage
},
bonjour : function() {
//Créer un nouveau modèle. Une fois que le modèle a demandé avec succès le contenu mis à jour au backend, il affichera une nouvelle page basée sur le modèle
var helloModel = new App.Models.Hello;
bonjourModèle.fetch({
succès : fonction(modèle){
var helloView = new App.Views.Hello({model: model});
helloView.trigger('change');
>
})
}});
App.initialize();