3

我想要完成的是让 ccoenraets 主干地窖示例与地窖数据库中的多个表一起使用。

到目前为止，我通过更改示例的“第 1 部分”所做的尝试：

  1. 我更改了数据库：我将现有的“wine”表复制到“winedetail”。然后我删除了 'wine' 中除 id 和 name 之外的所有列。

  2. 我已将 index.php 中的函数更改为：

    function getWines() {

$sql = "select name,id FROM wine ORDER BY name";
try {
    $db = getConnection();
    $stmt = $db->query($sql);  
    $wines = $stmt->fetchAll(PDO::FETCH_OBJ);
    $db = null;
    // echo '{"wine": ' . json_encode($wines) . '}';
    echo json_encode($wines);
} catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}
}

function getWine($id) {

$sql = "SELECT * FROM winedetail WHERE id=:id";
try {
    $db = getConnection();
    $stmt = $db->prepare($sql);  
    $stmt->bindParam("id", $id);
    $stmt->execute();
    $wine = $stmt->fetchObject();  
    $db = null;
    echo json_encode($wine); 
} catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}
}

我在 chome 控制台中遇到的错误：

未捕获的 ReferenceError：未定义葡萄

我没有更改 index.html 和 main.js。作为参考，我也会在这里发布它们：

main.js

// Models
window.Wine = Backbone.Model.extend();

window.WineCollection = Backbone.Collection.extend({
    model:Wine,
    url:"../api/wines"
});



window.WineListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
    },

    render:function (eventName) {
        _.each(this.model.models, function (wine) {
            $(this.el).append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }

});


// Views
window.WineListItemView = Backbone.View.extend({

    tagName:"li",

    template:_.template($('#tpl-wine-list-item').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});

window.WineView = Backbone.View.extend({

    template:_.template($('#tpl-wine-details').html()),

    render:function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});


// Router
var AppRouter = Backbone.Router.extend({

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

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

    wineDetails:function (id) {
        this.wine = this.wineList.get(id);
        this.wineView = new WineView({model:this.wine});
        $('#content').html(this.wineView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();

索引.html

<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
</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>

<!-- Templates -->
<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 %>"/>
    </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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>   
<script src="js/main.js"></script>   

</body>
</html>
4

1 回答 1

0

尝试

wineDetails:function (id) {
    var wine = this.wineList.get(id);
    wine.fetch({
      success: function(){
        console.log(wine);
        var wineView = new WineView({model: wine});
        $('#content').html(wineView.render().el);
      }
    });
}

确保打印在控制台中的模型具有grapes值。执行上述操作会使视图等到模型被获取后再尝试显示它。如果上面的代码有效，则意味着：

  • 当您获取集合时，您会丢失grapes模型上的值
  • 在显示葡萄酒详细信息之前，您无需等待收藏品被提取

另请注意，如果用户直接访问 url“wines/1”，您的应用程序将崩溃，因为没有集合实例。

于 2014-01-20T07:54:38.680 回答