我发现以下陈述:
el: '#footer'](https://addyosmani.com/backbone-fundamentals/#getting-set-up)
el: '#footer'
var todosView = new TodosView({el:$('#footer')});
另外,我读到:该view.$el属性等效于$(view.el),view.$(selector)并且等效于$(view.el).find(selector)。在TodoView示例的render方法中,我们看到this.$el用于设置元素的HTML,并this.$()用于查找类“edit”的子元素。
view.$el
$(view.el)
view.$(selector)
$(view.el).find(selector)
this.$el
this.$()
$el和之间有什么区别el?
$el
el
该el视图属性
this.el可以从DOM选择器字符串或Element解析;否则会从视图的创建tagName,className,id 和attributes属性。如果未设置,this.el则为空div,通常就可以了。
this.el
tagName
className
id
attributes
div
它是一个DOM元素对象引用。 不要el直接设置,如果要更改它,请改用该view.setElement方法
view.setElement
该$elproperty
视图元素的缓存jQuery对象。一个方便的引用,而不是总是重新包装DOM元素。
this.$el = $(this.el);
也 不要$el直接设置,使用view.setElement方法。
该el选项
一个el参考,也可以通过在该视图的构造函数。
new Backbone.View({ el: '#element' }); new Backbone.View({ el: $('#element') }); // unecessary
它会覆盖该el属性,然后将该$el属性用于该属性。
如果传递了选择器字符串,则将其替换为其表示的DOM元素。
为什么要分配$('#footer')给el?
$('#footer')
_setElement: function(el) { this.$el = el instanceof Backbone.$ ? el : Backbone.$(el); this.el = this.$el[0]; },
这说明了为什么this.$el等同于$(this.el)。
$(this.el)
但是什么Backbone.$呢?
Backbone.$
骨干保持对任何事物的参考$。
$
出于Backbone的目的,jQuery,Zepto,Ender或My Library(玩笑)拥有该$变量。
在我们的例子中,$是jQuery,Backbone.$也是jQuery,但是Backbone依赖项很灵活:
Backbone唯一的硬依赖性是Underscore.js(>=1.8.3)。要使用Backbone.View实现RESTful持久性和DOM操作,请包括 jQuery(> =1.11.0)和json2.js,以支持较早的InternetExplorer。(类似Underscore和jQueryAPI的Lodash和Zepto等也可以在不同程度的兼容性下正常工作。)
this.$(selector) 相当于 $(view.el).find(selector)
this.$(selector)
事实上, 这是一个有点更有效的$查看功能就是:
$: function(selector) { return this.$el.find(selector); },
什么是缓存的jQuery对象?
在这种情况下,这仅意味着jQuery对象保留在变量内,该变量在视图内被重用。它避免了$(selector)每次查找元素的昂贵操作。
$(selector)
您可以(并且应该)尽可能使用这种小的优化方式,例如在render函数内部:
render
render: function() { this.$el.html(this.template(/* ...snip... */)); // this is caching a jQuery object this.$myCachedObject = this.$('.selector'); }, onExampleEvent: function(e) { // avoids $('.selector') here and on any sub-sequent example events. this.$myCachedObject.toggleClass('example'); }
给jQuery缓存的对象变量加上前缀$只是一种标准,而不是必需的。
Backbone的源代码少于2000行,它有据可查且易于阅读。我强烈鼓励每个人都深入其中,以轻松理解基本逻辑。
他们还提供带注释的源页面 ,它甚至更易于阅读。