0
此示例來自this站點渲染的視圖功能不工作
main.js
// Models
var Wine = Backbone.Model.extend();
var WineCollection = Backbone.Collection.extend({
model:Wine,
url:"api/wines"
});
// Views
var WineListView = Backbone.View.extend({
tagName:'ul',
initialize:function() {
this.model.bind("reset", this.render, this);
},
render:function (eventName) {
alert("WineListView");
_.each(this.model.models, function (wine) {
this.$el.append(new WineListItemView({model:wine}).render().el);
}, this);
return this;
}
});
var WineListItemView = Backbone.View.extend({
tagName:"li",
template:_.template($('#tpl-wine-list-item').html()),
render:function (eventName) {
alert("hi")
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var WineView = Backbone.View.extend({
tagName:'div',
template:_.template($('#tpl-wine-details').html()),
render:function (eventName) {
alert("WineView");
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>
<link rel="stylesheet" href="../css/styles.css" />
</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="lib/jquery.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="js/main.js"></script>
</body>
</html>
在main.js如果我手動添加模型到集合它工作正常。當我從服務器使用this.wineList.fetch（）;如果我通過它來渲染函數集合是空的。但是，如果我在該函數集合中發出alert（「something」），將不會爲空。 this.wineList.fetch（）從服務器獲取數據，它不會在集合上調用set函數。會有什麼問題？
在後端我使用node.js.前端我正在使用backbone.js。我對骨幹技術很陌生。請告訴我我錯過了什麼。
api/wine返回json字符串。它的一系列葡萄酒模型對象和它的所有屬性都以逗號分隔 – Archana
@HarmonyDeveloper：爲什麼2個答案，你可以編輯你以前的答案。 – Praveen
我是新來的這個論壇，但旁邊我以前的答案可能是解決別人。 –