使用 require 和主干通过 html 文件而不是脚本标签加载模板

Question

我有一个非常简单的网页，它只是使用主干从模板文件中加载视图：

<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 文件中。那么，有人知道最简单的方法吗？

我尝试关注this tutorial，它把我带入了这个大兔子洞，我最终使用了 require.js 和 text 模块、一个路由器和两个新的 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;
});

但它不起作用，我不知道为什么。任何帮助深表感谢。为过多的代码道歉，但所有这些似乎都是必要的，只是为了以正确的方式加载这些东西。

Answer 1

目前你的配置确实有问题。 Backbone 不是 AMD 模块，因此您必须使用 requirejs 的 shim 选项。好吧，这个例子不言自明，因为它是关于 Backbone 的。

Answer 2

在这种情况下，您必须使用您需要的模板，searchFormTemplate 而不是尝试使用 jquery 获取它。

文本插件将为您提供正确的 HTML，并将其包含在变量 searchFormTemplate 中，以便您使用它。

在 SearchFormeView 的渲染函数中更改此项

render: function(){
    // Compile the template using underscore
    var template = _.template(searchFormTemplate, {} ); // 
    // Load the compiled HTML into the Backbone "el"
    this.$el.html( template );
}

Answer 3

安装https://github.com/requirejs/text提供的文本插件

然后继续在这里定义插件：

require.config({
  paths: {
    text: '{{directory where you put text.js}}',
  }
});

既然我们在这个话题上，requirejs-tpl-plugin 是一个更好的选择https://github.com/jfparadis/requirejs-tpl