Backbone.js_Others の Hello World プログラム例

次の内容を含む新しい api.php ファイルを作成します:

コードをコピー コードは次のとおりです:

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

新しいindex.htmlファイルを作成します。 (バックボーンは jquery とアンダースコアに基づいています。テンプレートの解析には Mustache を使用します。もちろん、アンダースコアで他の haml、jade、またはテンプレートを使用することもできます)

内容:

コードをコピー コードは次のとおりです:

<頭>

次の内容を含む新しいcustom.jsファイルを作成します:

コードをコピー コードは次のとおりです:

// これはビュー/コントロール/モデルを管理するグローバル クラスです
var App = {
モデル: {}、
ビュー: {}、
コントローラ: {}、
コレクション: {}、
初期化: function() {
new App.Controllers.Routes();
Backbone.history.start() // すべての Backbone プログラムを駆動するには、Backbone.history.start() が必要です。
}
};
App.Models.Hello = Backbone.Model.extend({
URL: function() {
return '/api.php' // データのバックエンド アドレスを取得します。
}、
初期化: function() {
This.set({'message':'hello world'}); // フロントエンドはメッセージフィールドを定義し、名前フィールドはバックエンドによって提供されます。
}
});
App.Views.Hello = Backbone.View.extend({
el: $("ボディ"),
テンプレート: $("# 初期化: function(options){
this.options = オプション;
this.bind('change', this.render);
this.model = this.options.model;
}、
render: function(){ // render メソッドの目的は 2 つだけです。this.el を埋めることと、チェーン操作のためにこれを返すことです。
$(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );
これを返してください
}
});
App.Controllers.Routes = Backbone.Controller.extend({
ルート: {
"!/hello" : "hello",//#!/hello を使用してルーティングを実行します
}、
こんにちは : function() {
// 新しいモデルを作成します。モデルがバックエンドから更新されたコンテンツを正常に要求すると、モデルに基づいて新しいページがレンダリングされます
var helloModel = new App.Models.Hello;
helloModel.fetch({
成功: 関数(モデル){
var helloView = new App.Views.Hello({モデル: モデル});
helloView.trigger('change');
}
})
}});
App.initialize();