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

Question

我有一个非常简单的网页，它使用 backbone 从模板文件加载 View :

<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 和文本模块、一个路由器、两个新的 js 文件(main 和 app)，以及一个 View 和一个模板。我目前在 View 中收到一个错误，指出 Backbone 无法读取未定义的属性“ View ”。这是我的代码:

在 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 中，我为我的 View 设置了一条路线:

// 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
  };
});

最后，我只是创建了那个 View ，它将加载我的模板:

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 模块，因此您必须使用 shim requirejs 选项。嗯，这个例子不言而喻，因为它是关于 Backbone 的。