Exemple de programme Hello World de Backbone.js_Others

Créez un nouveau fichier api.php avec le contenu :

Copier le code Le code est le suivant :

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

Créez un nouveau fichier index.html. (Backbone est basé sur jquery et underscore. Nous utilisons Moustache pour l'analyse des modèles. Bien sûr, vous pouvez également utiliser d'autres modèles haml, jade ou underscore)

Contenu :

Copier le code Le code est le suivant :

Nouveau document

Créez un nouveau fichier custom.js avec du contenu :

Copier le code Le code est le suivant :

// 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();