テンプレートファイルからビューをロードするためだけにバックボーンを使用している非常に単純な Web ページがあります。
<div id="content"></div>
<script src="js/vendor/json2.js"></script>
<script src="js/vendor/jquery-2.0.2.min.js"></script>
<script src="js/vendor/underscore-min.js"></script>
<script src="js/vendor/backbone-min.js"></script>
<script src="js/flight-match-form.js"></script>
<script type="text/template" id="template-flight-match">
<section id="form-search" class="content-inner clearfix">
<div id="date-container" class="search-row clearfix">
<label class="search-label" for="date">Travel Date</label>
<img src="images/structure/icon-calendar.png" alt="calendar" class="calendar">
<span class="help-text" id="date-unknown">don't know it?</span>
</div>
<div id="flight-container" class="search-row clearfix">
<label class="search-label" for="date">FLIGHT #</label>
<input type="text" class="search-input" id="input-flight" pattern="[a-zA-Z0-9]+">
<span class="help-text" id="date-unknown">don't know it?</span>
</div>
<button id="button-match">
Match
<img src="images/structure/icon-arrow.png" height="15" width="20" alt="Submit Arrow">
</button>
</section>
</script>
そして、flight-match-form.js では、単純に次のように言います。
$(document).ready(function(){
var MatchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#template-flight-match").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
}
});
var matchView = new MatchView({ el: $("#content") });
});
これはうまく機能し、次に私が実際にやりたかったことは、すべての html をスクリプト タグから取り出して、適切な HTML ファイルに入れることだけでした。それで、これを行う最も簡単な方法を知っている人はいますか？
私はこのチュートリアルに従おうとしましたが、require.js とテキスト モジュール、ルーター、2 つの新しい js ファイル (メインとアプリ)、ビューとテンプレート。現在、バックボーンが未定義のプロパティ「ビュー」を読み取ることができないというエラーがビューに表示されています。これは私のコードです:
index.html に require.js をインクルードし、main.js を初期ファイルとして参照するようにします。
次に、main.js でテンプレート ディレクトリを指定し、それを app.js に送信します。
require.config({
paths: {
jquery: 'vendor/jquery/jquery-2.0.2.min',
underscore: 'vendor/underscore/underscore-min',
backbone: 'vendor/backbone/backbone-min',
templates: '../templates'
}
});
require([
'app',
], function(App){
App.initialize();
});
app.js で、ルーターを初期化します。
define([
'jquery',
'underscore',
'backbone',
'router', // Request router.js
], function($, _, Backbone, Router){
var initialize = function(){
// Pass in our Router module and call it's initialize function
Router.initialize();
};
return {
initialize: initialize
};
});
そして router.js で、ビューのルートを設定します。
// Filename: router.js
define([
'jquery',
'underscore',
'backbone',
'views/search/SearchFormView'
], function($, _, Backbone, SearchFormView) {
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'search': 'SearchFormView'
}
});
var initialize = function(){
var app_router = new AppRouter;
app_router.on('route:SearchFormView', function(){
// Call render on the module we loaded in via the dependency array
var searchView = new SearchFormView();
searchView.render();
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
最後に、テンプレートをロードするビューを作成します。
define([
'jquery',
'underscore',
'backbone',
'text!templates/search/search-form-template.html'
], function($, _, Backbone, searchFormTemplate){
var SearchFormView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#template-flight-match").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
}
});
return SearchFormView;
});
しかし、うまくいかず、その理由がわかりません。どんな助けでも大歓迎です。コードの量が多すぎることをお詫びしますが、このようなものを適切な方法でロードするだけですべてが必要なようです。