我有一个非常简单的网页，它只是使用主干从模板文件中加载视图：
<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 和文本模块，一个路由器，两个新的 js 文件（main 和 app），以及一个视图和一个模板。我目前在视图中遇到错误，指出 Backbone 无法读取未定义的属性“视图”。这是我的代码：
在 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;
});
但它不起作用，我不知道为什么。任何帮助深表感谢。为过多的代码道歉，但所有这些似乎都是必要的，只是为了以正确的方式加载这些东西。