-
Notifications
You must be signed in to change notification settings - Fork 11
1.x tutorial require beez js hbs
HTMLからロードされるJavaScriptファイルで、このファイルがJavaScriptのエントリーポイントになります。
index.html.hbsと同様のルールを使用しています。
詳しくは、HTML - index/index.hbsを参照ください。
require.beez.js.hbsの {{XXXX}} で利用可能なデータ
| 変数 | 型 | 説明 |
|---|---|---|
| {{config}} | JSON Object | conf/[env].[key].json#develop.requirejs["beez.core"] |
| {{entrypoint}} | String | conf/[env].[key].json#develop.entrypoint |
| {{name}} | 文字列 | [env] |
| {{key}} | 文字列 | [key] |
上記の設定をしてあれば、http://0.0.0.0:1109/m/tutorial/s/index を表示するタイミングで、事前に利用可能な自動生成ファイル後のファイルを表示しています。 あとは、リンクをクリックすれば自動で生成されたファイルデータが取得できます。
元になるhbsファイルが下記のようになっているとします。
require.beez.js.hbs
// beez generate.
requirejs.config({{ config }});
/**
* Entry-point the process
*/
// 1
require(['beez'], function(beez, Controller) {
// 2
beez.manager.setup(); // Beez-MVCR マネージャーのセットアップ
beez.i18n.setup(); // 国際化対応セットアップ
require(['index/index'], function (Controller) {
beez.manager.c // 3
.async() // 4
.create('index', Controller).then(function(controller) {
controller.setup(function () { // Beez-Controllerのセットアップ
var mr = beez.manager.r.setup(); // Beez-Routerのセットアップ @see: Backbone#Router
beez.history.start(); // Backbone#History
// 5
controller.index(); // start!!!
});
}).end();
});
});beez-foundationで自動変換ルールに沿って変換されたファイルは以下のようになるはずです。
require.beez.local.develop.js
// beezが自動でconfディレクトリから生成
requirejs.config({
"baseUrl": "/m/tutorial/s",
"paths": {
"backbone": "/m/tutorial/vendor/backbone",
"underscore": "/m/tutorial/vendor/underscore",
"zepto": "/m/tutorial/vendor/zepto",
"handlebars": "/m/tutorial/vendor/handlebars.runtime",
"beez": "/m/tutorial/vendor/beez",
"backbone.localStorage": "/m/tutorial/vendor/backbone.localStorage"
},
"shim": {
"backbone": {
"deps": [
"underscore",
"zepto"
],
"exports": "Backbone"
},
"zepto": {
"exports": "$"
},
"underscore": {
"exports": "_"
},
"handlebars": {
"exports": "Handlebars"
}
},
"config": {
"beez.core": {
"url": {
//"app": "http://0.0.0.0:1109/m/tutorial",
"api": "http://0.0.0.0:1109/p",
"base": "http://0.0.0.0:1109/m/tutorial/s",
//"stat": "http://0.0.0.0:1109/m/tutorial/s",
"vendor": "http://0.0.0.0:1109/m/tutorial/vendor"
},
"defines": {
"globals": {
"DEBUG": true
}
},
"logging": {
"level": "DEBUG",
"separator": " "
},
"router": {
"*default": {
"route": "*default",
"name": "index",
"require": "index/index",
"xpath": "/@/index"
}
}
}
}
});
/**
* Entry-point the process
*/
require(['beez'], function(beez, Controller) {
beez.manager.setup();
beez.i18n.setup();
require(['index/index'], function (Controller) {
beez.manager.c.async().create('index', Controller).then(function(controller) {
controller.setup(function () {
var mr = beez.manager.r.setup();
beez.history.start();
controller.index(); // start!!!
});
}).end();
});
});
requirejs.configは、require.jsの定義になります。詳しくはrequire.js#configを参照ください。
Beezでは、各種初期化処理を、setup関数で統一しています。ですので使いたいメソッドにsetupを使えば初期化が完了します。
一番最初に実行したいControllerのrequire.js用のパスです。
今回は、index/index ですので、s/index/index.js がロードされます。
- MVCRのインスタンスを一元管理をします。
- beez.manager.(m|v|c|r) は、beez.manager.(model|view|controller|router|)のショートカットです。
- Beezでは基本的に単独でmodel|view|controller|routerを作らずに、この
beez.manager経由での作成を推奨しています。
async関数は、Controller Managerへのアクセスを非同期に切り替える関数です。
非同期処理が有効なクラスにはすべてこのasync関数があります。
Beezには、標準でBucks.jsという非同期ライブラリが同梱されています。
Bucks.jsは、軽量な汎用非同期ライブラリです。特にBeezに依存することなく単独でも使用できます。 詳しくはGithub - Bucks.jsを参照ください。
初めて実行するサブモジュールはハッシュフラグメントがない状態で実行しますので、直接対象の関数を実行します。 これで、アプリの起動の準備ができました。おめでとうございます！