我开始使用 Backbone.JS，并且有一个关于它如何工作的问题。
我有一个页面应该加载体育列表，然后渲染 View 。现在，因为体育列表是通过 AJAX 加载的，所以我需要将事件绑定(bind)到集合，以便仅在实际加载该集合中的数据时才呈现它。
这是我到目前为止所得到的:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="../../src/vendor/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/vendor/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/vendor/backbone.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="sportsList"></div>
<script type="text/template" id="sports-template">
<ul>
<% _.each(sports, function(sport){ %>
<li>
<%= sport.getDescription() %>
</li>
<% }); %>
</ul>
</script>
<script type="text/javascript" charset="utf-8" src="application.js"></script>
</body>
</html>
至于javascript代码:
var Sport = Backbone.Model.extend({
getDescription: function() {
return this.get('description');
}
});
var Sports = Backbone.Collection.extend({
model: Sport,
initialize: function(options) {
this.bind("refresh", function() {
options.view.render();
});
var sports = this;
$.ajax({
url: 'http://localhost:8080/?service=ListSportsService&callback=?',
dataType: 'jsonp',
success: function(data) {
sports.refresh(data);
}
});
}
});
var SportsView = Backbone.View.extend({
el: '#sportsList',
template: _.template($('#sports-template').html()),
initialize: function() {
this.model = new Sports({view: this});
},
render: function() {
$(this.el).html(this.template({sports: this.model.models}));
return this;
}
});
var SportsController = Backbone.Controller.extend({
routes: {
'sports': 'listSports'
},
listSports: function() {
new SportsView();
}
});
$(document).ready(function(){
window.app = new SportsController();
Backbone.history.start();
});
真正让我烦恼的部分是必须将 View 传递给集合并在那里绑定(bind)刷新事件，以便我可以在加载所有内容后渲染 View 。
我的问题是，是否有一种我缺少的更干燥/更简单的方法？
请记住，我使用的是 ZeptoJS 而不是 jQuery。
最佳答案
您的收藏应该阅读
var Sports = Backbone.Collection.extend({
model: Sport,
url: '/?service=ListSportsService&callback=?'
});
尽可能使用 Backbone.sync 功能(此处通过指定集合上的 url 并使用 fetch)。
你的 Controller 应该读取
var SportsController = Backbone.Controller.extend({
routes: {
'sports': 'listSports'
},
listSports: function() {
//create the view with the collection as a model
this.sports = new Sports();
this.view = new SportsView({model: this.sports});
this.sports.bind("refresh", this.view.render);
// fetch all the sports
this.sports.fetch();
}
});
享受吧。
关于javascript - 事件与 View 和 AJAX 加载的集合绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4850509/