Contoh program Hello World bagi Backbone.js_Others

Buat fail api.php baharu dengan kandungan:

Salin kod Kod adalah seperti berikut:

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

Buat fail index.html baharu. (Backbone adalah berdasarkan jquery dan garis bawah. Kami menggunakan Misai untuk menghurai templat. Sudah tentu, anda juga boleh menggunakan haml, jed atau templat lain dalam garis bawah)

Kandungan:

Salin kod Kod adalah seperti berikut:

Buat fail custom.js baharu dengan kandungan:

Salin kod Kod adalah seperti berikut:

// Ini ialah kelas global yang mengurus pandangan/kawalan/model
var Apl = {
Model: {},
Pandangan: {},
Pengawal: {},
Koleksi: {},
mulakan: function() {
App.Controllers.Routes();
baharu Backbone.history.start() // Untuk memacu semua program Backbone, Backbone.history.start() adalah perlu.
}
};
App.Models.Hello = Backbone.Model.extend({
url: function() {
            return '/api.php'; // Dapatkan alamat hujung belakang data.
},
mulakan: function() {
This.set({'message':'hello world'}); // Hujung hadapan mentakrifkan medan mesej, dan medan nama disediakan oleh hujung belakang.
}
});
App.Views.Hello = Backbone.View.extend({
el: $("badan"),
templat: $("#hello-container-template").html(),
mulakan: fungsi(pilihan){
this.options = pilihan;
this.bind('change', this.render);
this.model = this.options.model;
},
render: function(){ // Kaedah render hanya mempunyai dua matlamat: mengisi this.el dan mengembalikan ini untuk operasi rantai.
$(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );
pulangkan ini
}
});
App.Controllers.Routes = Tulang Belakang.Controller.extend({
laluan: {
"!/hello" : "hello",//Gunakan #!/hello untuk memandu penghalaan
},
helo : function() {
//Buat model baharu Selepas model berjaya meminta kandungan yang dikemas kini dari bahagian belakang, ia akan memaparkan halaman baharu berdasarkan model
var helloModel = App.Models.Hello;
helloModel.fetch({
kejayaan: fungsi(model){
var helloView = App.Views.Hello baharu({model: model});
helloView.trigger('change');
}
})
}});
App.initialize();