如何el处理视图？它必须设置,否则事件不会触发(见此处).
但它应该是页面上已有的元素吗？在我的应用程序中,我将(jQuery模板)模板渲染到Fancybox中.el那个案子应该怎么办？
我正在实现我的第一个实际的非教程Backbone应用程序,并且有关于使用backbone.js的一个方面的2-ahh问题,这对我来说并不是很好,这涉及将视图渲染el到DOM中而不是使用一个现有的元素el.我怀疑我会在这里为你们提供一些"受教育的时刻",并感谢你的帮助.
我在Web中看到的大多数Backbone View示例在创建View时指定了tagName,id和/或className,从而创建了一个与DOM无关的el.它们通常看起来像:
App.MyView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
...
},
render: function () {
$(this.el).html(<render an html template>);
return this;
}
});
但是这些教程并不总能解释他们如何建议将渲染的el放入DOM中.我已经看到了几种不同的方式.所以,我的第一个问题是:调用视图的渲染方法并将其插入DOM的适当位置在哪里？(不一定是同一个地方).我已经看到它在路由器,视图的初始化或渲染函数中完成,或者仅在根级文档就绪函数中完成.($(function ()).我可以想象这些都有效,但有没有正确的方法呢？
其次,我从一些HTML标记/线框开始,并将html部分转换为与骨干视图对应的js模板.而不是让视图渲染一个未连接的元素并在html中提供一个锚点来粘贴它,我觉得它更自然,当只有一个元素的视图,它不会消失,使用现有的,清空的包装元素(通常是a div或span)作为el自身.这样我就不用担心在文档中找到插入我未连接的el的位置,这可能最终看起来像这样(注意额外的分层):
<div id="insert_the_el_in_here"> <!-- this is all that's in the original HTML doc -->
<div id="the_el"> <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
<!-- we're finally getting to some useful …你能告诉Backbone.js视图$el和之间的区别el吗？
在我的简单项目中,我有2个视图 - 订单项视图(品牌)和应用.我有附加功能,允许选择多个项目:
var BrandView = Backbone.View.extend({
...some code...
toggle_select: function() {
this.model.selected = !this.model.selected;
if(this.model.selected) $(this.el).addClass('selected');
else $(this.el).removeClass('selected');
return this;
}
});
var AppView = Backbone.View.extend({
...some code...
delete_selected: function() {
_.each(Brands.selected(), function(model){
model.delete_selected();
});
return false;
},
});
事实是,我想知道选择了多少项.在此设置中,选择不会影响模型,因此不会触发任何事件.从MVC概念来看,我理解视图不应该与其他视图直接对话.那么AppView如何知道BrandViews中正在选择某些内容？
更具体地说,我AppView知道选择了多少项,所以如果选择了多于1个,我会显示一个菜单供多个选择.
我想知道是否有可能在一条线路内绑定主干中的多个事件类型.
考虑以下:
var MyView = Backbone.View.extend({
id: 'foo',
events: {
'click .bar': 'doSomething',
'touchstart .bar': 'doSomething'
},
doSomething: function(e) {
console.log(e.type);
}
});
基本上我想知道的是,是否可以将'click'和'touchstart'的事件绑定组合成一行 - 沿着以下行:
events: { 'click,touchstart .bar': 'doSomething' }
任何建议,将不胜感激.
我可以将处理程序附加到Backbone Views,如:
var TodoView = Backbone.View.extend({
events: {
"xxx": "eventHandler1"
"yyy": "eventHandler2"
}
});
但是如果我想在同一个事件中附加多个处理程序呢？
var TodoView = Backbone.View.extend({
events: {
"xxx": "eventHandler1"
"yyy": "eventHandler2"
"xxx": "eventHandler3" // this isn't valid ... at least in CoffeeScript
}
});
我可以创建一个自定义处理程序
function compositeXXX() { eventHandler1(); eventHandler2 }
但这似乎并不理想......
我正在创建一个单页面应用程序,我对骨干很新.我在创建使用相同wrapper-div的多个视图时遇到问题.
我的设置:
我为所有视图添加了一个close函数:
Backbone.View.prototype.close = function(){
this.remove();
this.off();
if (this.onClose){
this.onClose();
}
}
我有一个wrapper-div,我想渲染视图,删除它们并渲染新的视图.所以我的SetupView看起来像这样:
app.SetupView = Backbone.View.extend({
el: '#my_view_wrapper',
...
});
从我交换视图的函数我关闭当前(打开)视图,如下所示:
var v = this.model.get('view');
v.close();
题
我的问题是我有多个视图使用相同的wrapper-div.但是当我关闭一个视图时,这个wrapper-div似乎被删除了,我尝试创建的下一个视图找不到这个div.
我想有一个简单的解决方案？我想重用相同的包装器,只删除其中的视图,而不是包装器本身.
我有一个拥有许多视图的主干应用程序.在视图之间切换会触发Ajax请求以获取不同的集合.如果启动新的请求,我想停止当前的"读取"ajax请求.可能吗？
我正在使用Backbone,我有一个定义了事件的视图:
....
events: {
'click .search-button': 'setModelTerm',
'change .source-select': 'setModelSourceId',
'change .source-select': 'activateSource'
},
....
我希望在事件change .source-select触发时触发两种方法.问题是事件对象中的最后一个条目会覆盖前面的条目.
如何在一个事件中触发两个方法？
(我试图阻止编写另一种调用这两种方法的方法)
我正在使用backbone.js创建一个单页应用程序,并想知道处理更改标题的最佳方法.我想在视图中有一个'title'选项,并让路由器(不知何故)设置document.title.有没有人实现类似的东西？谢谢