model undefined on page reload

我試圖從this網站的例子。它工作正常。但是，如果我將視圖，模型，路由器分成單獨的文件，它會給我一個問題。有3個意見。 WineList視圖，WineListItemView和winedetails視圖。 WineList視圖將葡萄酒模型的集合視爲模型，winelistItem和winedetails視圖將葡萄酒視爲模型。路由器的代碼是這樣的model undefined on page reload

var app = app || {}; 
app.AppRouter = Backbone.Router.extend({ 

    routes:{ 
     "":"list", 
     "wines/:id":"wineDetails" 
    }, 

    initialize:function() { 
     $('#header').html(new app.HeaderView().render().el); 
    }, 
    list:function() { 
     this.wineList = new app.WineCollection(); 
     this.wineListView = new app.WineListView({model:this.wineList}); 
     this.wineList.fetch(); 
     $('#sidebar').html(this.wineListView.render().el); 
    }, 

    wineDetails:function (id) { 
     if(this.wineList == undefined) 
      { 
       this.wineList = new app.WineCollection(); 
     this.wineListView = new app.WineListView({model:this.wineList}); 
     this.wineList.fetch(); 
     $('#sidebar').html(this.wineListView.render().el); 
      } 
     this.wine = this.wineList.get(id); 
     if (app.router.wineView) app.router.wineView.close(); 
     this.wineView = new app.WineView({model:this.wine}); 
     $('#content').html(this.wineView.render().el); 
    } 
});

在頁面加載它取模型從頁面的側邊欄DIV葡萄酒的服務器和顯示列表。當我點擊特定的葡萄酒項目時，其細節將顯示在頁面的內容div上。這一切都很好。但是當我重新加載那個現在包含特定細節的頁面時，Winedetails視圖的葡萄酒模型給出了未定義的。我intializing主頁上的路由器這樣

app.js

var app = app || {}; 

$(function() { 


}) 
app.router = new app.AppRouter(); 
Backbone.history.start();

的index.html

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Backbone Cellar</title> 
<link rel="stylesheet" href="../css/styles.css" /> 
</head> 

<body> 

<div id="header"><span class="title">Backbone Cellar</span></div> 

<div id="sidebar"></div> 

<div id="content"> 
<h2>Welcome to Backbone Cellar</h2> 
<p> 
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js. 
</p> 
</div> 
<div> 
    <a href="/page2">Next page</a> 
</div> 
<!-- Templates --> 
<script type="text/template" id="tpl-header"> 
    <span class="title">Backbone Cellar</span> 
    <button class="new">New Wine</button> 
</script> 
<script type="text/template" id="tpl-wine-list-item"> 
    <a href='#wines/<%= id %>'><%= name %></a> 
</script> 

<script type="text/template" id="tpl-wine-details"> 
    <div class="form-left-col"> 
     <label>Id:</label> 
     <input type="text" id="wineId" name="id" value="<%= id %>" disabled /> 
     <label>Name:</label> 
     <input type="text" id="name" name="name" value="<%= name %>" required/> 
     <label>Grapes:</label> 
     <input type="text" id="grapes" name="grapes" value="<%= grapes %>"/> 
     <label>Country:</label> 
     <input type="text" id="country" name="country" value="<%= country %>"/> 
     <label>Region:</label> 
     <input type="text" id="region" name="region" value="<%= region %>"/> 
     <label>Year:</label> 
     <input type="text" id="year" name="year" value="<%= year %>"/> 
     <button class="save">Save</button> 
     <button class="delete">Delete</button> 
    </div> 
    <div class="form-right-col"> 
     <img height="300" src="../pics/<%= picture %>"/> 
     <label>Notes:</label> 
     <textarea id="description" name="description"><%= description %></textarea> 
    </div> 
</script> 

<!-- JavaScript --> 
<script src="js/lib/jquery.min.js"></script> 
<script src="js/lib/underscore.js"></script> 
<script src="js/lib/backbone.js"></script> 
<script src="js/models/WineModel.js"></script> 
<script src="js/collections/WineListCollection.js"></script> 
<script src="js/Views/WineListView.js"></script> 
<script src="js/Views/WineListItemView.js"></script> 
<script src="js/Views/WineDetailsView.js"></script> 
<script src="js/Views/HeaderView.js"></script> 
<script src="js/routers/routers.js"></script> 
<script src="js/app.js"></script> 

</body> 
</html>

我是新來的這個技術骨幹。請告訴我，我失去了

來源

2013-05-27 Archana

this.wineList.fetch();

火災異步請求到服務器，這意味着內容將執行該行後到達（或沒有），在某些時候，但你的應用程序繼續執行的響應是否到來或不。在頁面重新加載（假設您在URL中有wines/:id）首先必須獲取完整的葡萄酒列表，然後才能訪問該葡萄酒中的任何特定葡萄酒。

您必須等到下載集合後，才能在此請求完成後訪問帶有ID的酒。

於是發起請求後繼續在success回調應用程序邏輯：

來源

2013-05-27 07:15:50

謝謝..它的工作 – Archana

不客氣。 –

你不需要*取得整個列表，只需加載特定的模型就足夠了：'this.wine = new WineModel（{id：id}）; this.wine.fetch（）;' - 雖然提取仍然是異步的，模型實例可以立即傳遞給視圖。 –

model undefined on page reload

回答

相關問題