【发布时间】：2015-03-17 09:25:54
【问题描述】：
我非常努力地用 Require.js 和 Handlebars.js 来围绕 Backbone.js。我仍然不能 100% 确定最佳组合是什么，但这是我目前用来在工作中重做营销网站的方法。
我们添加了更多页面，随着它的增长，我认为将静态站点放入像 Backbone.js 这样的 MV 中会很好。如果您将动态数据作为模板，这似乎只是一个不错的选择，似乎只适合循环数据和呈现 DOM 元素的典型场景。
但是，如果这对您的需求来说太高级了，而您只是想使用 SOC 和 DRY 实践将代码保存在模块中以便于维护，而不必在 .html 文件中放置大量标记。
但似乎每个 tut 都只是重复讲述了主干/require.js 的故事。我假设这是因为没有人对静态站点使用主干/要求？我希望我错了，人们是否仍然需要诸如骨干/require.js 之类的东西，即使对于较大的静态站点，只是为了使它们更易于维护？这似乎是一个合乎逻辑的解决方案。
我很难理解如何仅使用 Backbone 中的路由器文件从一个静态页面链接到另一个静态页面。
理想情况下，我希望有一个在整个站点中通用的页眉和页脚模板，然后每个页面的内容区域都只有大块代码，为什么用主干/要求和把手很难做到这一点？
谁能给我一个简单的解决方案来解决看起来并不复杂的问题，这样我就不必创建 17 个静态页面都重复相同的页眉和页脚。
我认为从这样一个更简单的项目开始将有助于我以后理解更复杂的示例。
我已经包含了一个示例 index.html、一个示例视图、一个示例路由器、配置文件和 app.js 文件，因此您可以看到我是如何尝试将它们组合在一起的，但无论我怎么看，它似乎唯一可行的方法是创建一堆静态页面并通过路由器链接它们。如果在一天结束时我能完成的就是这一切，那么我可以接受。
谢谢。
index.html:
<body>
<div id="container">
<!-- BODY WRAPPER -->
<section class="body-wrapper">
{{Header Template Here}}
{{Body Content Here}}
{{Footer Template Here}}
</section>
<!-- /.body-wrapper -->
</div>
<!-- /#container -->
<script data-main="js/config" src="js/libs/require.js"></script>
</body>
config.js：
// Set the require.js configuration for you application.
requirejs.config({
// Initialize the application with the main application file
baseUrl: 'js',
paths:
{
jquery : [
'//ajax.goolgleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
'libs/jquery.min'
],
modernizr : [
'//cdjns.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
'libs/modernizr'
],
hbs : '../bower_components/require-handlebars-plugin/hbs',
underscore : '../node_modules/underscore/underscore-min',
backbone : '../node_modules/backbone/backbone-min',
handlebars : '../node_modules/handlebars/handlebars',
text : '../node_modules/text/text'
},
hbs: {
helpers: true,
i18n: false,
templateExtensions: 'hbs',
partialsUrl: ''
},
shim: {
'jquery' : {
exports: '$'
},
'underscore': {
exports: '_'
},
'handlebars': {
exports: 'Handlebars'
}
}
});
// Launch the App
require(['app'],
function(App){
App.initialize();
});
app.js
define(
['jquery','underscore','backbone','router'],
function($, _, Backbone, Router){
var initialize = function() {
Router.initialize();
}
return {
initialize: initialize
};
});
路由器.js
define(
['jquery',
'underscore',
'backbone',
'views/HomeView',
'views/HeaderView',
'views/FooterView',
'models/FeatureModel',
'collections/FeatureCollection'],
function($, _, Backbone, HomeView, HeaderView, FooterView, FeatureModel, FeatureCollection){
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'home', //#index
'/feature/:page' : 'featurePage',
'*actions' : 'defaultAction',
'about' : 'about', //#about
'/support' : 'support', //#support
}
});
var initialize = function(options) {
var appView = options.appView;
var router = new AppRouter(options);
router.on('home', function(){
var homeView = new HomeView();
homeView.render();
});
router.on('route:defaultAction', function(actions){
var homeView = new HomeView();
homeView.render();
});
router.on('support', function(){
var supportView = new SupportView();
supportView.render();
});
var headerView = new HeaderView();
var footerView = new FooterView();
Backbone.history.start();
};
return {
initialize: initialize
};
});
views/homeView.js
define(
['jquery','underscore','backbone' , 'text!/templates/home.html'],
function($, _, Backbone, homeTemplate){
var HomeView = Backbone.View.extend({
el : $('#content'),
render : function() {
this.$el.html(homeTemplate);
}
});
return HomeView;
});
模板/home.html
Big block of HTML content for the body of the index.html page
【问题讨论】：
标签： backbone.js requirejs handlebars.js