Question

我有一个网页，我正在使用Backbone使其成为单页应用程序，但刷新页面或跟随书签不起作用 - JS说它未定义等。

为简单起见，这是一个精简版

this.LeBaron = new function() {
  this.Routing = new function() {
    var Router = Backbone.Router.extend({
      routes: {
        "index": "index",
        "other": "other"
      },

      index: function() {
        view("index", {});
      },
      other: function() {
        view("other", {});
      }
    });

    var view = function(id, model) {
      $("#content").html($("#" + id).html());

    }
    this.router = new Router();
    Backbone.history.start();
  }
}

$(document).ready(function() {

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>
    Single Page Test
  </title>

  <script type="text/javascript" src="../js/jquery-1.9.0.js"></script>
  <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
  <script type="text/javascript" src="../js/backbone-min-1-1-2.js"></script>
  <script type="text/javascript" src="page.js"></script>
</head>

<body>
  <div id="content">

  </div>

  <a href="#/index">  Index </a>
  <br />
  <a href="#/other"> Other </a>
</body>
<div style="display:none">
  <div id="index">
    <p>Index Page!</p>
  </div>

  <div id="other">
    <p>Other Page!</p>
  </div>
</div>

</html>

Answer 1

你的构造函数

之前有new

＆＃13;

var LeBaron = this.LeBaron = function() {
  this.Routing = function() {
    var Router = Backbone.Router.extend({
      routes: {
        "index": "index",
        "other": "other"
      },

      index: function() {
        view("index", {});
      },

      other: function() {
        view("other", {});
      }
    });

    var view = function(id, model) {
      $("#content").html($("#" + id).html());

    };

    this.router = new Router();

    Backbone.history.start();
  };
  
  this.Routing();
};

$(document).ready(function() {
  new LeBaron();
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>
    Single Page Test
  </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone.js"></script>
</head>

<body>
  <div id="content">

  </div>

  <a href="#/index">  Index </a>
  <br />
  <a href="#/other"> Other </a>
</body>
<div style="display:none">
  <div id="index">
    <p>Index Page!</p>
  </div>

  <div id="other">
    <p>Other Page!</p>
  </div>
</div>

</html>

＆＃13;

骨干刷新/书签页面不起作用

1 个答案: