Hello World-Programmbeispiel von Backbone.js_Others

Erstellen Sie eine neue api.php-Datei mit dem Inhalt:

Code kopieren Der Code lautet wie folgt:

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

Erstellen Sie eine neue index.html-Datei. (Backbone basiert auf Jquery und Underscore. Wir verwenden Mustache zum Parsen von Vorlagen. Natürlich können Sie auch andere Haml-, Jade- oder Templates in Underscore verwenden)

Inhalt:

Code kopieren Der Code lautet wie folgt:

Erstellen Sie eine neue custom.js-Datei mit dem Inhalt:

Code kopieren Der Code lautet wie folgt:

// Dies ist eine globale Klasse, die Ansichten/Steuerelemente/Modelle verwaltet
var App = {
Modelle: {},
Ansichten: {},
Controller: {},
Sammlungen: {},
initialisieren: function() {
new App.Controllers.Routes();
Backbone.history.start() // Um ​​alle Backbone-Programme zu steuern, ist Backbone.history.start() erforderlich.
}
};
App.Models.Hello = Backbone.Model.extend({
URL: function() {
            return '/api.php'; // Die Backend-Adresse der Daten abrufen.
},
initialisieren: function() {
This.set({'message':'hello world'}); // Das Frontend definiert ein Nachrichtenfeld und das Namensfeld wird vom Backend bereitgestellt.
}
});
App.Views.Hello = Backbone.View.extend({
el: $("body"),
Vorlage: $("#hello-container-template").html(),
initialisieren: Funktion(Optionen){
this.options = Optionen;
this.bind('change', this.render);
this.model = this.options.model;
},
render: function(){ // Die Render-Methode hat nur zwei Ziele: this.el füllen und this für Kettenoperationen zurückgeben.
$(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );
gib dies zurück
}
});
App.Controllers.Routes = Backbone.Controller.extend({
Routen: {
"!/hello" : "hello",//Verwenden Sie #!/hello, um das Routing zu steuern
},
Hallo: function() {
//Erstelle ein neues Modell. Nachdem das Modell erfolgreich aktualisierte Inhalte vom Backend angefordert hat, wird eine neue Seite basierend auf dem Modell gerendert
var helloModel = new App.Models.Hello;
helloModel.fetch({
Erfolg: Funktion(Modell){
var helloView = new App.Views.Hello({model: model});
helloView.trigger('change');
}
})
}});
App.initialize();