2014-09-30 54 views
0

我有一个网页,我正在使用Backbone将它变成单页应用程序thingy,但刷新页面或跟随书签不起作用 - JS说它是未定义的等Backbone刷新/书签页不起作用

这是简单一个精简版

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>

回答

0

您在构造函数之前有new

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(); 
 
});
<!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>

+0

从所有工作停止代码:(内容DIV没有得到填补,我没有错误信息或者,为什么。 我一直对JavaScript中的“新”感到困惑 - 我有点太习惯于Java,并且像这样的javascript总是让我困惑 – 2014-09-30 20:25:33

+0

你应该首先创建构造函数_then_用新关键字调用它 – 2014-10-01 04:36:21

+0

好完美 - 这是解决了这个问题,我已经得到了全面的网站,因为它应该在当地工作 - 需要一些小的调整,因为其他的东西不喜欢这些变化,但可能是我做错了首先/ – 2014-10-02 08:42:19