个人中心
gpt4 book ai didi

backbone.js - 具有多个表的 Ccoenraets backbone-cellar 示例(backbone.js/SLIM 框架)

转载 作者：行者123 更新时间：2023-12-04 02:38:15 25 4
gpt4 key购买 nike

我想要完成的是让 ccoenraets backbone-cellar 示例能够处理 cellar 数据库中的多个表。

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

  1. 我更改了数据库:我将现有的“wine”表复制到' Wine 细节'。然后我删除了“wine”中除 id 之外的所有列和名字。

  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 控制台中遇到的错误:

Uncaught ReferenceError :未定义葡萄

我没有改变 index.html 和 main.js。作为引用，我也将它们张贴在这里:

ma​​in.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>

最佳答案

尝试

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 值。执行上述操作会使 View 在尝试显示之前等待模型被获取。如果上面的代码有效，则意味着:

  • 当您获取集合时，您缺少模型上的 grapes 值
  • 在显示 Wine 详细信息之前，您无需等待获取集合

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

关于backbone.js - 具有多个表的 Ccoenraets backbone-cellar 示例(backbone.js/SLIM 框架)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9574191/

25 4 0
文章推荐： graphics - 您会推荐哪种图标编辑软件来为应用程序创建图标
文章推荐： perl - @_ 在 Perl 子程序中是如何工作的？
文章推荐： jsp - javax.el.PropertyNotFoundException : using JSTL in JSP
文章推荐： mumps - 需要 MUMPS 示例代码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com