2014-09-30 55 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