Question

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

到目前为止，通过改变第1部分＆＃39;示例：

我改变了数据库：我复制了现有的葡萄酒＆＃39;表到＆＃39; winedetail＆＃39 ;.然后我删除了＆＃39; wine＆＃39;中的所有列。代表身份和名字。

我已将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();

的index.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>

Answer 1

尝试

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值
在显示葡萄酒详情

另请注意，如果用户直接访问网址“wines / 1”，您的应用会崩溃，因为没有收集实例。

Ccoenraets带有多个表的backbone-cellar示例（backbone.js / SLIM框架）

1 个答案: