骨干JS-视图未呈现 [英] Backbone JS - View not rendering
问题描述
我正在尝试获取一个简单的html页面，以在html页面上显示检索到的集合数据.没有抛出任何错误，所以我无法分辨自己在做什么.
I am trying to get a simple html page to display the retrieved collection data on the html page. There are no errors being thrown so I cannot tell what I'm doing wrong.
正在正确创建模型，集合和视图，因为我可以在控制台中看到它们以及从API检索到的数据，但是该页面未在页面上显示任何内容.任何帮助将不胜感激.
The model, collection, and view are being created properly as I can see them in the console with the data that's being retrieved from the API, however the page is not displaying anything on the page. Any help would be greatly appreciated.
模型
Department = Backbone.Model.extend({
idAttribute: "dept_id",
urlRoot: appRouteUrl + '/api/v1/departments',
defaults: {
dept_code: '',
dept_desc: ''
}
});
收藏
DepartmentCollection = Backbone.Collection.extend({
url: appRouteUrl + '/api/v1/departments',
model: Department
});
查看
var DepartmentListView = Backbone.View.extend({
template: "#department-list-template",
tagName: "ul",
render: function() {
var results = [];
var compiledTemplate = _.template(this.template);
this.collection.each(function(department) {
console.log(department);
var html = compiledTemplate(department.toJSON());
results.push(html);
});
this.$el.html(results);
return this;
}
});
索引
<!DOCTYPE html>
<html>
<head>
<title>AppName</title>
</head>
<body>
<div class="departments">
<script type="text/template" id="department-list-template">
<span><%= dept_desc %></span>
</script>
</div>
<script>
var departments = new DepartmentCollection();
departments.fetch();
var departmentList = new DepartmentListView({
collection: departments
});
$('.departments').html(departmentList.render().$el);
departmentList.render();
</script>
</body>
</html>
推荐答案
由于您没有项目视图，因此我认为最好在集合视图的模板上进行迭代.确保在您的collections fetch方法成功后创建视图实例/将其渲染.
Since you don't have an item view, I think it's best to iterate on the collection view's template. Make sure you create the view instance/call it's render after your collections fetch method succeeds.
此外，您不应该在可以删除的元素内添加模板.
Also, you shouldn't add your template inside an element that can be removed.
Department = Backbone.Model.extend({
idAttribute: "dept_id",
defaults: {
dept_code: '',
dept_desc: ''
}
});
DepartmentCollection = Backbone.Collection.extend({
model: Department
});
var DepartmentListView = Backbone.View.extend({
template: _.template($('#department-list-template').html()),
tagName: "ul",
render: function() {
this.$el.html(this.template({
departments: this.collection.toJSON()
}));
return this;
}
});
var departments = new DepartmentCollection([{
dept_id: 1,
dept_code: 'test1',
dept_desc: 'test1'
}, {
dept_id: 2,
dept_code: 'test2',
dept_desc: 'test2'
}]);
/*
departments.fetch({
success: function(){
// render the view here
}
});
*/
var departmentList = new DepartmentListView({
collection: departments
});
$('.departments').html(departmentList.render().$el);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="departments"></div>
<script type="text/template" id="department-list-template">
<% _.each(departments,function(deparment){ %>
<li><span><%= deparment.dept_desc %></span></li>
<% }); %>
</script>
这篇关于骨干JS-视图未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
