使用require和backbone通过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文件中，我认为它属于该文件。 那么，有没有人知道最简单的方法呢？

我试着按照这个教程 ，它引导我走下这个大兔子洞，在那里我最终使用了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;
});

但它不起作用，我无法弄清楚原因。 任何帮助深表感谢。 为过多的代码道歉，但似乎只需要以正确的方式加载这些东西。

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