Cocoaraets骨幹地窖示例與多個表（backbone.js/SLIM框架）

我試圖完成的是獲得ccoenraets骨幹地窖示例與地窖數據庫中的多個表一起使用。Cocoaraets骨幹地窖示例與多個表（backbone.js/SLIM框架）

我所用的例子的改變「部分1」到目前爲止已經試過：

我改變了數據庫：我複製現有的「酒」表「winedetail」。然後，我刪除了'葡萄酒'exept中的所有列，其ID爲和名稱。

我已經改變了功能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() .'}}'; 
} 
}

的錯誤我得到在丁目控制檯：

未捕獲的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>

來源

2012-03-05 Willy Overtoom

好吧，你正試圖從本教程開始，但嘗試從它做出你自己的東西。很好，但僅供參考，這是上述應用程序的基礎教程：https://github.com/ccoenraets/backbone-cellar – Sander 2012-03-05 22:32:21

我認爲你應該使用兩種不同的模型來表示兩個不同的數據集。您從Wines（id，name）獲取（）所有數據，並且該模型假定它具有所需的所有數據。您嘗試爲wineDetails呈現您的模板。集合只是提供了一個模型，它是通過fetch（）=> id，name檢索的。它不會發出第二個請求，從第二個表中獲取其餘數據（它假定它已經包含所有數據）。模板然後嘗試渲染model.grapes並拋出錯誤。您應該爲詳細數據創建單獨的模型。 – nxtwrld 2012-09-24 09:29:47

與

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); 
     } 
    }); 
}

嘗試確保該模型在Consol中打印e的值爲grapes。通過執行上述操作，視圖會一直等待，直到模型被提取出來然後再嘗試顯示它。如果上面的代碼工作，這意味着要麼：

當你獲取集合，你錯過了你的模型grapes值
你不等待集合之前取顯示葡萄酒的細節

請注意，它看起來像是如果用戶直接去URL「葡萄酒/ 1」你的應用程序將崩潰，因爲沒有收集實例。

來源

2014-01-20 07:54:38

Cocoaraets骨幹地窖示例與多個表（backbone.js/SLIM框架）

回答

相關問題