Question

我在this网站上尝试示例。它工作正常。但如果我将视图，模型，路由器分离成单独的文件，它会给我一个问题。有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中。一切正常。但是当我重新加载那个现在包含特定细节的页面时，Winedetails视图的wine模型给出了undefined。我正在主页上像这样

初始化路由器

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>

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

Answer 1

this.wineList.fetch();

向您的服务器发出异步请求，这意味着内容将在执行此行后的某个时刻到达（或不到达），但无论响应是否到达，您的应用程序都会继续执行。在页面重新加载（假设您在URL中有wines/:id）首先，您需要在从集合中访问任何特定的葡萄酒之前获取完整的葡萄酒列表。

您必须等到下载集合，并在此请求完成后访问带有ID的葡萄酒。

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

this.wineList.fetch({
    success: function(model) {
        ...
        this.wine = model.get(id);
        ...
    }
});

模型undefined在页面重新加载

1 个答案: