Backbone.js 主干JS创建动态视图和集合
我有点笨 我有一个代码，其中我需要根据json列出类别，并在页面上列出它们。 现在，当用户单击任何类别列表时，将从服务器获取附加到该类别的新JSON并在页面上列出 我的问题是，我已经列出了类别，但不知道如何获取新的JSON，并通过根据所选类别动态创建新JSON的视图和集合在屏幕上显示它 这是我的HTML代码Backbone.js 主干JS创建动态视图和集合,backbone.js,backbone-views,backbone-events,backbone-routing,underscore.js-templating,Backbone.js,Backbone Views,Backbone Events,Backbone Routing,Underscore.js Templating,我有点笨 我有一个代码，其中我需要根据json列出类别，并在页面上列出它们。 现在，当用户单击任何类别列表时，将从服务器获取附加到该类别的新JSON并在页面上列出 我的问题是，我已经列出了类别，但不知道如何获取新的JSON，并通过根据所选类别动态创建新JSON的视图和集合在屏幕上显示它 这是我的HTML代码 类别列表 类别列表 var分类； var Category=Backbone.Model.extend（）； var CategoryCollection=Backbone.Collec
类别列表
类别列表
var分类；
var Category=Backbone.Model.extend（）；
var CategoryCollection=Backbone.Collection.extend({
型号：类别，
url:'categories.json'，
解析：函数（响应）{
categoryJSON=响应；
log（categoryJSON）
返回响应；
}
});
var CategoryAbout=Backbone.View.extend({
el:“.categoryList”，
渲染：函数（）{
var=这个；
//console.log（那个）
var eventCategory=new CategoryCollection（）；
//console.log（eventCategory）；
eventCategory.fetch({
成功：功能（类别集合）{
//console.log（CategoryCollection）
var template=35;.template（$（'#事件模板'）.html（），{CategoryCollection:CategoryCollection.models}）；
//console.log（模板）
即.$el.html（模板）；
}
})
},
活动：{
单击。类别h2:“doSearch”
},
doSearch：功能（事件）{
//点击按钮
console.log（'clicked'）；
console.log（event.toElement.className）
导航（'/category/'+event.toElement.className，{trigger:true}）；
//window.location.href=window.location.href+'/#/category/all'；
}
});
var CategoryAbout=新的CategoryAbout（）；
var Router=Backbone.Router.extend({
路线：{
“家”，
“category/：categoryName”：“getCategory”，
}
});
var router=新路由器（）；
//控制台日志（路由器）
路由器.on（'route:home'，函数（）{
//console.log（这个）
console.log（'home'）；
CategoryAbout.render（）；
});
router.on（'route:getCategory'，函数（categoryName）{
console.log（“类别名称”+类别名称）；
var-urlToFetch；
对于（var i=0；i如果我遗漏了任何数据，请告诉我，您的意思是，您不确定如何在Backbone.js中编辑项目？而不仅仅是项目。e、 g我选择了一个类别“workshop”，在workshop类别中，json应该从添加到集合和workshop列表中的服务器获取
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Category list</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Category list</h1>
<hr />
<div class='categoryList'></div>
<div class='selected_category'></div>
</div>
<script type="text/template" id="events-template">
<% _.each( CategoryCollection, function(Category){ %>
<div class='category'>
<h2 class='<%= Category.get("category") %>' >
<%= Category.get("category") %>
</h2>
</div>
<% }); %>
</script>
<script type="text/template" id="selectedCategory-template">
<% _.each( SelectedCategoryCollection, function(selected_category){ %>
<div class='category_list'>
<%= selected_category.get("category") %>
</div>
<% }); %>
</script>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script>
var categoryJSON;
var Category = Backbone.Model.extend();
var CategoryCollection = Backbone.Collection.extend({
model: Category,
url: 'categories.json',
parse: function (response) {
categoryJSON = response;
console.log(categoryJSON)
return response;
}
});
var CategoryAbout = Backbone.View.extend ({
el: '.categoryList',
render: function () {
var that = this;
// console.log(that)
var eventCategory = new CategoryCollection();
// console.log(eventCategory);
eventCategory.fetch({
success: function (CategoryCollection) {
// console.log(CategoryCollection)
var template = _.template($('#events-template').html(), {CategoryCollection: CategoryCollection.models});
// console.log(template)
that.$el.html(template);
}
})
},
events: {
"click .category h2" : "doSearch"
},
doSearch: function(event){
// Button clicked
console.log('clicked');
console.log(event.toElement.className)
router.navigate('/category/'+event.toElement.className, { trigger: true });
// window.location.href = window.location.href + '/#/category/all';
}
});
var CategoryAbout = new CategoryAbout ();
var Router = Backbone.Router.extend({
routes: {
'': 'home',
"category/:categoryName": "getCategory",
}
});
var router = new Router();
// console.log(router)
router.on('route:home', function () {
// console.log(this)
console.log('home');
CategoryAbout.render();
});
router.on('route:getCategory', function (categoryName) {
console.log( "Category Name " + categoryName );
var urlToFetch;
for (var i = 0; i < categoryJSON.length; i++) {
if(categoryJSON[i].category == categoryName)
{
urlToFetch = categoryJSON[i].data;
}
};
console.log(urlToFetch);
});
Backbone.history.start();
</script>