【发布时间】：2015-03-12 20:26:01
【问题描述】：
首先我不确定 Backbone 是否是我应该使用的库，所以请注意这一点。
我正在构建一个由大约 17 个页面组成的静态内容网站。
您可能想知道的第一个问题是：如果网站上没有任何动态内容，为什么要使用 Backbone？
我必须回答的唯一好的答案是页面中仍然有一些可重复的元素，例如页脚，而有些元素可能仅在“标题”之类的内容上有所变化，就像页眉一样。所以我想在这方面实践 DRY 原则。
我也想学习 Backbone，所以对我来说，这是朝着正确方向迈出的一步，将它们全部放在我的脑海中。
我想使用把手进行模板化，但没有找到关于如何在我的 index.html 文件中调用模板 {{Footer}} 的好教程，而该模板是从其他 external.js 文件调用的。
换句话说，我希望我的模板位于单独的 .js 文件中，并且能够将它们调用到我的 index.html 文件中，但我找不到这样做的好方法。
任何建议都基于我的页脚示例，我想我可以从那里弄清楚。
谢谢。
更新：
这是我希望我的索引页理想的样子：
Index.html，我试图在其中拉出 MainView，其中包含 HeaderView 和 FooterView 作为其中的部分内容。
<body>
<div id="container">
<!-- BODY WRAPPER -->
<section class="body-wrapper">
<div class="header-container" id="home">
<div class="header-nav-container">
{{> header}}
</div>
</div>
<section class="home-content">
{{> home-content}}
</section>
<section class="footer-container">
{{> footer}}
</section>
</section>
<!-- /.body-wrapper -->
</div>
<!-- /#container -->
<script data-main="js/config" src="js/libs/require.js"></script>
</body>
HomeContentView：views/homeContentView.js
define(
['jquery','underscore','backbone' , 'text!/templates/main.tpl.html' 'text!/templates/home-content.tpl.html'],
function($, _, Backbone, mainTemplate, homeContentTemplate){
handlebars.registerPartial('home-content' , homeContentTemplate);
var template = handlebars.compile()
var HomeContentView = Backbone.View.extend({
el : $('#content'),
render : function() {
this.$el.html(homeContentTemplate);
}
});
return HomeView;
});
标题部分：views/headerView.js
define(
['jquery' , 'underscore' , 'backbone' , 'handlebars' , 'text!/templates/main.tpl.html' , 'text!/templates/header.tpl.html'],
function($, _, Backbone, Handlebars, mainTemplate, headerTemplate){
handlebars.registerPartial('header' , headerTemplate);
var template = handlebars.compile()
var HeaderView = Backbone.View.extend({
el : $('#header'),
render : function() {
this.$el.append(headerTemplate);
}
});
return HeaderView;
});
页脚视图：views/footerView.js
define(
['jquery','underscore','backbone' , 'text!/templates/main.tpl.html' , 'text!/templates/footer.tpl.html'],
function($, _, Backbone, mainTemplate, footerTemplate){
handlebars.registerPartial('footer' , footerTemplate);
var template = handlebars.compile()
var FooterView = Backbone.View.extend({
el : $('#footer'),
render : function() {
this.$el.html(footerTemplate);
}
});
return FooterView;
});
包含页眉和页脚部分的主视图：views/mainView.js
define(
['jquery','underscore','backbone' , 'index.html' 'text!/templates/main.tpl.html'],
function($, _, Backbone, homeTemplate, mainTemplate){
handlebars.registerPartial('main' , mainTemplate);
var template = handlebars.compile()
var MainView = Backbone.View.extend({
el : $('.home-content'),
render : function() {
this.$el.html(mainTemplate);
}
});
return MainView;
});
Router.js
define(
['jquery',
'underscore',
'backbone',
'views/MainView'
'views/HomeContentView',
'views/HeaderView',
'views/FooterView',
'models/FeatureModel',
'collections/FeatureCollection'],
function($, _, Backbone, MainView, HomeConentView, HeaderView, FooterView, FeatureModel, FeatureCollection){
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'home', //#index
'/feature/:page' : 'featurePage',
'*actions' : 'defaultAction'
}
});
var initialize = function(options) {
var appView = options.appView;
var router = new AppRouter(options);
router.on('home', function(){
var mainView = new MainView();
mainView.render();
});
router.on('route:defaultAction', function(actions){
var homeContentView = new HomeContentView();
homeContentView.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
};
});
【问题讨论】：
标签： backbone.js requirejs