3

私が達成しようとしているのは、ccoenraets backbone-cellar の例を取得して、cellar データベース内の複数のテーブルを操作することです。

例の「part-1」を変更してこれまでに試したこと:

  1. データベースを変更しました。既存の「wine」テーブルを「winedetail」に複製しました。次に、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 は変更していません。参考までに、こちらにも掲載しておきます。

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>
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コレクションを取得しているとき、モデルの値が失われています
  • ワインの詳細を表示する前に、コレクションが取得されるのを待つ必要はありません

コレクション インスタンスがないため、ユーザーが「wines/1」という URL に直接アクセスすると、アプリがクラッシュするように見えることにも注意してください。

于 2014-01-20T07:54:38.680 に答える