Heim >Web-Frontend >js-Tutorial >Hello World-Programmbeispiel von Backbone.js_Others

Hello World-Programmbeispiel von Backbone.js_Others

WBOY
WBOYOriginal
2016-05-16 15:53:501278Durchsuche

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:




Neues Dokument










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();
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn