使用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 模块，因此您必须使用 的shim选项requirejs。嗯，这个例子本身就说明了问题，因为它是关于 Backbone 的。