这个例子来自这个网站
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();
索引.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。我是骨干技术的新手。请告诉我我错过了什么。