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

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

<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>

这非常有效，我下一步真正想做的就是将所有html从脚本标记中提取出来，并放入一个适当的html文件中，我认为它应该属于这个文件。那么，有人知道最简单的方法吗

我试着跟随，它把我带进了一个大兔子洞，我最终使用了require.js和文本模块，一个路由器，两个新的js文件（main和app），以及一个视图和一个模板。我当前在视图中遇到一个错误，指出主干无法读取未定义的属性“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中，我为我的视图设置了一条路由：

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

---

但它不起作用，我不知道为什么。非常感谢您的帮助。很抱歉代码太多，但所有这些似乎都是以正确的方式加载这些内容所必需的。

安装文本插件，该插件可在

然后在此处继续定义插件：

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

---

因为我们正在讨论这个主题，所以requirejs tpl插件是一个更好的选择

在本例中，您必须使用所需的模板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 );
}

---

目前，您的配置确实存在问题。主干网不是AMD模块，因此您必须使用

requirejs

选项。好的，这个例子本身就说明了它是关于主干的。

您是否使用dev工具或firebug仔细检查了代码，以找出执行失败的地方？有一行代码实际触发错误会有所帮助。Require对此很有帮助。控制台在这一行列出了问题：var SearchFormView=Backbone.View.extend({我注意到，如果我在视图中记录主干，它会显示为未定义。为什么会这样？你使用的是AMD版本的主干吗？知道这一点很重要，如果你不使用AMD版本，你需要在你的应用程序中填充主干。ja文件你不认为这只是一个输入错误吗？“我当前在视图中遇到一个错误，指出主干网无法读取未定义的属性'view'。“。在我看来，这两行代码没有链接，因为它们不涉及主干。您尝试通过jquery应用这一点是对的，但这并没有解决问题。我认为Loamhoof可能在正确的轨道上，因为它是一个错误。控制台中的错误注册到此行：var SearchFormView=Backbone.View.extend({正如向Rayweb_on所说的，你认为它与他收到的错误有任何联系吗？另外，为什么在他显然已经在使用text.js的时候给他一个text.js的链接呢？在他的require.config示例中，他没有设置text plugin。在我把它放在评论上之后，你就把它作为和答案发布了……好吧，对不起，我花了一些时间写我的答案，因为我是d同时做其他事情。也很抱歉为他的实际问题发布了一个答案。你似乎不明白这是怎么回事。你不会把答案放在说一些完全无关的事情上，然后用评论来回答。好吧，在你看来，这只是为了名誉而起作用，我明白了，那么我就投票给你。干得好。@Rayweb_回答问题是有帮助的。一些不能回答问题的东西应该作为旁注放在评论中。也许你只是在回答问题之前没有阅读问题，否则你就会知道你的回答与他的错误无关。为什么工作很棒？我发现了他的问题，我回答，我看不出问题。好的，祝你好运给你，先生。我必须把它以答案的形式交给Loamhoof，但谢谢Rayweb，尽管如此，我还是对你的答案投了赞成票-我切换到了AMD版本的主干，但我真的想更好地理解shim，因为我觉得这将在未来的更改中得到更好的维护。如果有人发布一些与我的示例相关的代码，我很想看一看，并且会改变被接受的答案。

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