0

我正在尝试此站点的示例。它工作正常。但是如果我将视图、模型、路由器分成单独的文件，它会给我一个问题。有 3 个视图。WineList 视图、WineListItemView 和 winedetails 视图。WineList 视图将葡萄酒模型的集合作为模型，winelistItem 和 winedetails 视图将葡萄酒作为模型。路由器的代码是这样的

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 中。这一切都很好。但是当我重新加载现在包含特定细节的页面时，Windetails 视图的葡萄酒模型给出了 undefined 。我正在像这样在主页上初始化路由器

应用程序.js

var app = app || {};

$(function() {


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

索引.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>

我是这个骨干技术的新手。请告诉我我错过了什么

4

1 回答 1

1 
this.wineList.fetch();

向您的服务器发出一个异步请求，这意味着内容将在执行此行后的某个时间到达（或未到达），但无论响应是否到达，您的应用程序都会继续执行。在页面重新加载（假设您wines/:id在 URL 中）时，首先您必须获取完整的葡萄酒列表，然后才能访问收藏中的任何特定葡萄酒。

在此请求完成后，您必须等到下载集合并使用 id 访问 wine。

因此，在发起请求后，在success回调中继续您的应用程序逻辑：

this.wineList.fetch({
    success: function(model) {
        ...
        this.wine = model.get(id);
        ...
    }
});
于 2013-05-27T07:15:50.660 回答