Question

首先，我不确定Backbone是否是我应该使用的库，所以请注意。

我正在构建一个由大约17页组成的静态内容网站。

您可能想知道的第一个问题是：如果网站上没有任何动态内容，为什么要使用Backbone？

我唯一能得到的好答案是，仍然有一些像页脚这样的页面的可重复元素，有些可能只会像标题中的“标题”一样发生变化。所以我想在这方面实践DRY原则。

另外，我想学习Backbone，所以对我而言，这是朝着正确的方向迈出的一步，将它放在我的脑海中。

我想使用把手进行模板化，但是没有找到一个关于如何在我的index.html文件中调用模板{{Footer}}的好教程，该文件是从其他一些external.js文件中调用的。

换句话说，我希望我的模板在单独的.js文件中，并能够将它们调用到我的index.html文件中，我找不到一个好方法。

任何基于我的Footer示例的建议，因为我认为我可以从那里弄明白。

谢谢。

更新：

以下是我理想的索引页面：

我正在尝试拉动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
  };

});

Answer 1

您可能希望使用text plugin for require.js将模板作为原始文本加载，并使用Handlebars.registerPartial方法存储模板并使其可用于其他模板部分。

代码看起来像这样：

define(['handlebars', 'text!main.tpl.html','text!footer.tpl.html'],
    function(handlebars, mainTpl, footerTpl ){

    // Register the footer's template as a partial.
    handlebars.registerPartial('footer', footerTpl);

    // Compile the main template. The footer is included.
    var template = handlebars.compile(mainTpl);

    // ... use the template ...
});

对于主模板，您只需指定页脚模板的位置。

<section>
    Something...
    {{> footer}}
</section>

（注意表示部分的“＆gt;”。）

如何使用Require.js从tpl.js文件加载HTML模板

1 个答案: