Javascript 在同一页面中容纳多个主干视图、模型和集合
我正在努力在同一页中显示两个模型/集合Javascript 在同一页面中容纳多个主干视图、模型和集合,javascript,backbone.js,backbone-routing,Javascript,Backbone.js,Backbone Routing,我正在努力在同一页中显示两个模型/集合 <body> <div id="mainContainer"> <div id="contentContainer"></div> </div> <div id="mainContainer2"> <div id="contentContainer2"></div> </div> <script id="list_c
<body>
<div id="mainContainer">
<div id="contentContainer"></div>
</div>
<div id="mainContainer2">
<div id="contentContainer2"></div>
</div>
<script id="list_container_tpl" type="text/template">
<div class="grid_5 listContainer">
<div class="box">
<h2 class="box_head grad_colour">Your tasks</h2>
<div class="sorting">Show: <select id="taskSorting"><option value="0">All Current</option><option value="1">Completed</option></select>
<input class="search round_all" id="searchTask" type="text" value="">
</div>
<div class="block">
<ul id="taskList" class="list"></ul>
</div>
</div>
</div>
</script>
<script id="list2_container_tpl" type="text/template">
<div class="grid_5 mylistContainer">
<div class="box">
<h2 class="box_head grad_colour">Your facets</h2>
<div class="sorting">
%{--Show: <select id="taskSorting"><option value="0">All Current</option><option value="1">Completed</option></select>--}%
<input class="search round_all" id="searchFacet" type="text" value="">
</div>
<div class="block">
<ul id="facetList" class="list"></ul>
</div>
</div>
</div>
</script>
<script id="task_item_tpl" type="text/template">
<li class="task">
<h4 class="name searchItem">{{ name }}</h4>
</li>
</script>
<script id="facet_item_tpl" type="text/template">
<li class="facet">
<h5 class="label searchItem">{{ label }}</h5>
</li>
</script>
<script>
var myapp = {
model: {},
view: {},
collection: {},
router: {}
};
var facetsSearch = {
model: {},
view: {},
collection: {},
router: {}
};
</script>
<script src="underscore-min.js"></script>
<script src="handlebars.min.js"></script>
<script src="backbone-min.js"></script>
<script>
/* avoid */
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
</script>
<script>
// model.tasks.js
myapp.model.Tasks = Backbone.Model.extend({
default:{
completed: 0,
name: ""
},
//url:"/js/libs/fixtures/task.json"
});
var tasks1 = new myapp.model.Tasks({
completed: 0,
name: "Clear dishes"
}
);
var tasks2 = new myapp.model.Tasks({
completed: 1,
name: "Get out the trash"
}
);
var tasks3 = new myapp.model.Tasks({
completed: 0,
name: "Do the laundry"
}
);
var tasks4 = new myapp.model.Tasks({
completed: 1,
name: "Vacuuming the carpet"
}
);
// collection.tasks.js
myapp.collection.Tasks = Backbone.Collection.extend({
currentStatus : function(status){
return _(this.filter(function(data) {
return data.get("completed") == status;
}));
},
search : function(letters){
if (letters == "") return this;
var pattern = new RegExp(letters,"gi");
return _(this.filter(function(data) {
return pattern.test(data.get("name"));
}));
}
});
myapp.collection.tasks = new myapp.collection.Tasks([tasks1, tasks2, tasks3, tasks4]);
// route.tasks.js
myapp.router.Tasks = Backbone.Router.extend({
routes: {
"": "list",
},
list: function(){
this.listContainerView = new myapp.view.TasksContainer({
collection: myapp.collection.tasks
});
$("#contentContainer").append(this.listContainerView.render().el);
this.listContainerView.sorts()
}
});
myapp.router.tasks = new myapp.router.Tasks;
<!-- render views -->
myapp.view.TasksContainer = Backbone.View.extend({
events: {
"keyup #searchTask" : "search",
"change #taskSorting" : "sorts"
},
render: function(data) {
$(this.el).html(this.template);
return this;
},
renderList : function(tasks){
$("#taskList").html("");
tasks.each(function(task){
var view = new myapp.view.TasksItem({
model: task,
collection: this.collection
});
$("#taskList").append(view.render().el);
});
return this;
},
initialize : function(){
this.template = _.template($("#list_container_tpl").html());
this.collection.bind("reset", this.render, this);
},
search: function(e){
var letters = $("#searchTask").val();
this.renderList(this.collection.search(letters));
},
sorts: function(e){
var status = $("#taskSorting").find("option:selected").val();
if (status == "") status = 0;
this.renderList(this.collection.currentStatus(status));
}
});
myapp.view.TasksItem = Backbone.View.extend({
events: {},
render: function(data) {
$(this.el).html(this.template(this.model.toJSON()));
console.log(this.model.toJSON(), "became", this.template(this.model.toJSON()));
return this;
},
initialize : function(){
this.template = _.template($("#task_item_tpl").html());
}
});
</script>
<script>
// model.facets.js
facetsSearch.model.Facets = Backbone.Model.extend({
default: {
id: 0,
label: "",
facetValues: []
}
});
var facet1 = new facetsSearch.model.Facets({
id: 1,
label: "Organism",
facetValues: ["Orga1", "Orga2"]
});
var facet2 = new facetsSearch.model.Facets({
id: 2,
label: "Omics",
facetValues: ["Omics1", "Omics2"]
});
var facet3 = new facetsSearch.model.Facets({
id: 3,
label: "Publication Date",
facetValues: ["2016-11-01", "2016-11-02"]
});
// collection.facets.js
facetsSearch.collection.Facets = Backbone.Collection.extend({
search : function(letters){
if (letters == "") return this;
/**
* the g modifier is used to perform a global match (find all matches rather than stopping after the first match).
* Tip: To perform a global, case-insensitive search, use this modifier together with the "i" modifier.
*/
var pattern = new RegExp(letters, "gi");
return _(this.filter(function(data) {
return pattern.test(data.get("label"));
}));
}
});
facetsSearch.collection.facets = new facetsSearch.collection.Facets([facet1, facet2, facet3]);
// route.facets.js
facetsSearch.router.Facets = Backbone.Router.extend({
routes: {
"": "list",
},
list: function(){
this.mylistContainerView = new facetsSearch.view.FacetsContainer({
collection: facetsSearch.collection.facets
});
console.log("Facet collection: ", facetsSearch.collection.facets);
$("#contentContainer2").append(this.mylistContainerView.render().el);
this.mylistContainerView.sorts()
}
});
facetsSearch.router.Facets = new facetsSearch.router.Facets;
facetsSearch.view.FacetsContainer = Backbone.View.extend({
events: {
"keyup #searchFacet" : "search",
"change #facetSorting": "sorts"
},
render: function(data) {
$(this.el).html(this.template);
return this;
},
renderList : function(facets){
$("#facetList").html("");
facets.each(function(facet){
var view2 = new facetsSearch.view.FacetsItem({
model: facet,
collection: this.collection
});
$("#facetList").append(view2.render().el);
});
return this;
},
initialize : function(){
this.template = _.template($("#list2_container_tpl").html());
this.collection.bind("reset", this.render, this);
},
search: function(e){
var letters = $("#searchFacet").val();
this.renderList(this.collection.search(letters));
},
sorts: function(e){
/*var status = $("#taskSorting").find("option:selected").val();
if (status == "") status = 0;
this.renderList(this.collection.currentStatus(status));*/
}
});
facetsSearch.view.FacetsItem = Backbone.View.extend({
events: {},
render: function(data) {
$(this.el).html(this.template(this.model.toJSON()));
console.log(this.model.toJSON(), "became", this.template(this.model.toJSON()));
return this;
},
initialize : function(){
this.template = _.template($("#facet_item_tpl").html());
}
});
</script>
<script>
Backbone.history.start();
</script>
</body>
你的任务
显示：所有当前已完成
你的方面
%{--显示：所有当前已完成--}%
{{name}}
{{label}}
var myapp={
型号：{}，
视图：{}，
集合：{}，
路由器：{}
};
变量facetsSearch={
型号：{}，
视图：{}，
集合：{}，
路由器：{}
};
/*避开*/
_.templateSettings={
内插：/\{（.+？）\}\}/g
};
//model.tasks.js
myapp.model.Tasks=Backbone.model.extend({
默认值：{
完成日期：0，
姓名：“
},
//url:“/js/libs/fixtures/task.json”
});
var tasks1=新的myapp.model.Tasks({
完成日期：0，
名称：“清菜”
}
);
var tasks2=新的myapp.model.Tasks({
完成日期：1，
姓名：“滚出垃圾桶”
}
);
var tasks3=新的myapp.model.Tasks({
完成日期：0，
姓名：“洗衣服”
}
);
var tasks4=新的myapp.model.Tasks({
完成日期：1，
名称：“吸尘地毯”
}
);
//collection.tasks.js
myapp.collection.Tasks=Backbone.collection.extend({
当前状态：功能（状态）{
return(此.filter)函数(数据){
返回数据。获取（“完成”）==状态；
}));
},
搜索：函数（字母）{
如果（字母==“”）返回此项；
var模式=新的RegExp（字母“gi”）；
return(此.filter)函数(数据){
返回模式.test（data.get（“name”））；
}));
}
});
myapp.collection.tasks=新的myapp.collection.tasks（[tasks1，tasks2，tasks3，tasks4]）；
//route.tasks.js
myapp.router.Tasks=Backbone.router.extend({
路线：{
“：”列表“，
},
列表：函数（）{
this.listContainerView=新建myapp.view.TaskContainer({
集合：myapp.collection.tasks
});
$（“#contentContainer”）.append（this.listContainerView.render（）.el）；
this.listContainerView.sorts（）
}
});
myapp.router.tasks=新建myapp.router.tasks；
myapp.view.TasksContainer=Backbone.view.extend({
活动：{
“键控#搜索任务”：“搜索”，
“更改任务排序”：“排序”
},
渲染：函数（数据）{
$（this.el）.html（this.template）；
归还这个；
},
renderList:函数（任务）{
$（“#任务列表”）.html（“”）；
任务。每个（功能（任务）{
var view=new myapp.view.TasksItem({
模型：任务，
收藏：这个。收藏
});
$（“#任务列表”）.append（view.render（）.el）；
});
归还这个；
},
初始化：函数（）{
this.template=.template（$（“#list_container_tpl”）.html（））；
this.collection.bind（“reset”，this.render，this）；
},
搜索：功能（e）{
var字母=$（“#搜索任务”）.val（）；
this.renderList（this.collection.search（字母））；
},
排序：函数（e）{
var status=$（“#任务排序”）.find（“选项：选定”）.val（）；
如果（状态=“”）状态=0；
this.renderList（this.collection.currentStatus（status））；
}
});
myapp.view.TasksItem=Backbone.view.extend({
事件：{}，
渲染：函数（数据）{
$（this.el）.html（this.template（this.model.toJSON（））；
log（this.model.toJSON（），“been”，this.template（this.model.toJSON（））；
归还这个；
},
初始化：函数（）{
this.template=.template（$（“#任务_项目_tpl”）.html（））；
}
});
//model.facets.js
facetsearch.model.Facets=Backbone.model.extend({
默认值：{
id:0，
标签：“，
FacetValue:[]
}
});
var facet1=新facetsearch.model.Facets({
id:1，
标签：“生物体”，
facetValues:[“Orga1”、“Orga2”]
});
var facet2=新facetsearch.model.Facets({
id:2，
标签：“经济学”，
FacetValue:[“Omics1”、“Omics2”]
});
var facet3=新facetsearch.model.Facets({
id:3，
标签：“出版日期”，
FacetValue:[“2016-11-01”、“2016-11-02”]
});
//collection.facets.js
facetsSearch.collection.Facets=Backbone.collection.extend({
搜索：函数（字母）{
如果（字母==“”）返回此项；
/**
*g修饰符用于执行全局匹配（查找所有匹配，而不是在第一次匹配后停止）。
*提示：要执行不区分大小写的全局搜索，请将此修饰符与“i”修饰符一起使用。
*/
var模式=新的RegExp（字母“gi”）；
return(此.filter)函数(数据){
返回模式.test（data.get（“label”）；
}));
}
});
facetsSearch.collection.facets=新的facetsSearch.collection.facets（[facet1，facet2，facet3]）；
//route.facets.js
facetsSearch.router.Facets=主干网.router.extend({
路线：{
“：”列表“，
},
列表：函数（）{
this.mylistContainerView=新facetsSearch.view.FacetsContainer({
集合：facetsSearch.collection.facets
});
var Layout = Backbone.View.extend({
template: _.template($('#layout-template').html()),
// keep the selector strings in a simple object
selectors: {
tasks: '.task-container',
facets: '.facet-container',
},
initialize: function() {
this.view = {
tasks: new TaskList(),
facets: new FacetList()
};
},
render: function() {
this.$el.html(this.template());
var views = this.views,
selectors = this.selectors;
this.$(selectors.tasks).append(views.tasks.render().el);
this.$(selectors.facets).append(views.facets.render().el);
return this;
}
});
var Router = Backbone.Router.extend({
routes: {
"": "list",
},
list: function() {
this.listContainerView = new Layout();
$("body").html(this.listContainerView.render().el);
}
});
var TaskRouter = Backbone.Router.extend({
routes: {
'tasks': 'taskList',
'tasks/:id': 'taskDetails'
}
// ...snip...
});
var FacetsRouter = Backbone.Router.extend({
routes: {
'facets': 'facetList',
'facets/:id': 'facetDetails'
}
// ...snip...
});
myapp.view.TasksContainer = Backbone.View.extend({
// gets compiled once
template: _.template($("#list_container_tpl").html()),
initialize: function() {
// not here, as it gets compiled for each view
// this.template = _.template($("#list_container_tpl").html())
},
});
render: function(data) {
this.$el.html(this.template);
// I like to namespace them inside an object.
this.elements = {
$list: this.$('.task-list'),
$search: this.$('.task-sorting')
};
// then werever you want to use them
this.elements.$list.toggleClass('active');
return this;
},
this.collection.bind("reset", this.render, this);
// becomes
this.listenTo(this.collection, "reset", this.render);
myapp.collection.Tasks = Backbone.Collection.extend({
model: myapp.model.Tasks
// ...snip...
});
myapp.collection.tasks = new myapp.collection.Tasks([{
completed: 0,
name: "Clear dishes"
}, {
completed: 1,
name: "Get out the trash"
}, {
completed: 0,
name: "Do the laundry"
}, {
completed: 1,
name: "Vacuuming the carpet"
}]);