Backbone + 车把

Question

我是 backbone 和车把的新手，正在尝试模拟一个简单的场景。我有两个 htm 页面：

index.htm:

<div id="home">

  <h1 align="center">Music Paradise</h1>
  <div id="navigation" align="center">
    <p align="center">Search for bands of your choice</p>
    <a href="#/SearchBands">Search Bands</a>
    <p align="center">Search for concerts of your choice</p>
    <a href="#/SearchConcerts">Search Concerts</a> 
  </div> 
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>
<script type="text/javascript" src="../js/route.js"></script>

路由器页面：

var BandView = Backbone.View.extend({
      template: Handlebars.compile( $("#SearchBands-template").html() ),      
      initialize: function () {
          this.render();
      },

      render: function () {
          this.$el.html(this.template({greeting:"Welcome to Search Bands Feature!"}));

      }
  });


var ConcertView = Backbone.View.extend({
      template: Handlebars.compile( $("#SearchBands-template").html() ),      
      initialize: function () {
          this.render();
      },
      render: function () {
         this.$el.html(this.template({content:"Welcome to Search Concerts Feature!"}));

      }
    });


  var AppRouter = Backbone.Router.extend({
      routes: {          
          'SearchBands': 'bandRoute',
          'SearchConcerts': 'concertRoute',          
      },
      bandRoute: function () {
          var bandView = new BandView();          
          $("#data").html(bandView.el);
      },
      concertRoute: function () {
          var concertView = new ConcertView();          
          $("#data").html(concertView.el);
      }
  });

  var appRouter = new AppRouter();
  Backbone.history.start();

以及结果应路由到的第三个 htm 页面。

searchBands.htm

<div id="home">

  <h1 align="center">Music Paradise</h1>

<div id="data">
</div>

  <script type="text/template" id="SearchBands-template">
      <h1>Please Search Bands</h1>
     {{ greeting }}
  </script>



  <script type="text/template" id="SearchConcerts-template">
      <h1>Please Search Concerts</h1>
      {{ content }}
  </script>


</div>

我收到以下错误： handlebars.min.js:27 未捕获错误：您必须将字符串或 Handlebars AST 传递给 Handlebars.compile。你通过了 undefined.

我想这是由于 route.js 仍然不知道 searchBands.htm 并且不知何故我需要先加载 searchBands.htm。

谢谢。

Answer 1

Backbone 以及您尝试使用的基于哈希的路由专为单页应用程序设计。

您的 <script> 包含模板的标签应该在 index.html 本身中可用，然后您的应用程序脚本运行 jQuery 以通过 id 选择器找到它。

如果您想将模板保存在不同的 HTML 文件中，那么您应该使用 AJAX 以某种方式加载它们并将它们传递给 handlebars。如何做到这一点取决于更广泛的应用程序结构，例如，如果您使用的是 RequireJS，则可以使用它的文本插件，或者可以使用 jQuery 的 load 方法。

Backbone + 车把

Backbone + Handlebars

javascript

backbone.js

handlebars.js