Backbone：为什么要把'$（'＃footer'）`分配给`el`？ [英] Backbone: Why assign `$('#footer')` to `el`?

问题描述

我发现了以下陈述：

el：'＃footer'

var todosView = new TodosView（{el：$（'＃footer'）}）;

为什么要分配 $（'＃footer'）到 el ？这真让我困惑。我在这里阅读帖子，有什么区别在Backbone.js视图中的$ el和el之间？，仍然困惑。

Why assign $('#footer') to el? This is what really confused me. I read the post here, What is the difference between $el and el in Backbone.js views?, still confused.

此外，我读到：
view。$ el property相当于 $（view.el）和 view。$（selector ）相当于 $（view.el）.find（selector）。在我们的TodoView示例的render方法中，我们看到 this。$ el 用于设置元素的HTML和这个。$（）用于查找编辑类的子元素。

Also, I read: The view.$el property is equivalent to $(view.el) and view.$(selector) is equivalent to $(view.el).find(selector). In our TodoView example’s render method, we see this.$el used to set the HTML of the element and this.$() used to find subelements of class ‘edit’.

但有人说
如果你调用 $（this.el），你只需继续执行jquery选择器来获得相同的结果jquery对象。 '$ el'是 $（this.el）的缓存版本

But, someone said If you call $(this.el), your just keep executing the jquery selector to get the same jquery object. '$el' is the cached version of $(this.el)

什么是缓存版本？？

推荐答案

$ el 之间有什么区别？ el ？

el 查看属性

What is the difference between $el and el?

The el view property

this.el 可以从DOM选择器字符串或Element中解析出来;
否则将从视图的 tagName ， className ， id <创建/ code>
和属性属性。如果没有设置， this.el 是一个空的 div ，
这通常很好。

this.el can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties. If none are set, this.el is an empty div, which is often just fine.

这是一个DOM元素对象引用。 不要直接设置 el ，请使用 view.setElement 方法，如果你想改变它。

It is a DOM element object reference. Do not set el directly, use the view.setElement method instead if you want to change it.

视图元素的缓存jQuery对象。一个方便的引用
而不是一直重新包装DOM元素。

A cached jQuery object for the view's element. A handy reference instead of re-wrapping the DOM element all the time.

我喜欢用户 mu太短看跌它：

I like how user mu is too short puts it:

this.$el = $(this.el);

此外不设置 $ el 直接使用 视图。 setElement 方法。

Also do not set $el directly, use the view.setElement method.

el 引用也可以传入视图的构造函数。

An el reference may also be passed in to the view's constructor.

new Backbone.View({ el: '#element' });
new Backbone.View({ el: $('#element') }); // unecessary

它会覆盖 el 属性，然后用于 $ el 属性。

It overrides the el property, which is then used for the $el property.

如果传递选择器字符串，则替换为它代表的DOM元素。

If a selector string is passed, it is replaced with the DOM element it represents.

this.el 可以是一个jQuery对象。您可以看到Backbone确保 el 是一个DOM元素，而 $ el 是<的一个jQuery对象a href =https://github.com/jashkenas/backbone/blob/8ec88604732944f197b352a6be22c8216ea9d3a1/backbone.js#L1285\"rel =nofollow noreferrer> _setElement function ：

this.el can be a jQuery object. You can see that Backbone make sure el is a DOM element and $el is a jQuery object of it in the _setElement function:

_setElement: function(el) {
  this.$el = el instanceof Backbone.$ ? el : Backbone.$(el);
  this.el = this.$el[0];
},

这显示为什么 this。$ el 相当于 $（this.el）。

Backbone保留对 $ 的引用。

Backbone keeps a reference to whatever is $.

对于Backbone的用途，jQuery，Zepto，Ender或My Library（开玩笑）
拥有 $ 变量。

在我们的例子中， $ 是jQuery，所以 Backbone。$ 只是jQuery，但Backbone依赖是灵活的：

In our case, $ is jQuery, so Backbone.$ is just jQuery, but Backbone dependencies are flexible:

Backbone的只有硬依赖是 Underscore.js （> = 1.8.3）。使用 Backbone.View 进行
RESTful持久性和DOM操作，包括
jQuery （> = 1.11.0）， json2.js 用于较早的Internet Explorer支持。
（下划线和jQuery API的模仿，例如 Lodash 和 Zepto ，
也会起作用，具有不同程度的兼容性。）

Backbone's only hard dependency is Underscore.js ( >= 1.8.3). For RESTful persistence and DOM manipulation with Backbone.View, include jQuery ( >= 1.11.0), and json2.js for older Internet Explorer support. (Mimics of the Underscore and jQuery APIs, such as Lodash and Zepto, will also tend to work, with varying degrees of compatibility.)

this。$（selector）相当于 $（view.el） .find（选择器）

事实上，效率更高， $ 查看功能只是：

this.$(selector) is equivalent to $(view.el).find(selector)

In fact, it's a little more efficient, the $ view function is just:

$: function(selector) {
  return this.$el.find(selector);
},

什么是缓存的jQuery对象？

在这种情况下，它只表示jQuery对象保存在变量中，该变量在视图中重用。它避免了每次使用 $（选择器）查找元素的昂贵操作。

What is a cached jQuery object?

In this case, it only means that a jQuery object is kept inside a variable, which is reused inside the view. It avoids the costly operation of finding the element with $(selector) each time.

你可以（并且应该）尽可能使用这个小优化，比如在渲染函数内：

You can (and should) use this little optimization whenever possible, like inside the render function:

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缓存对象变量$ 只是标准，不是要求。

Prefixing the jQuery cached object variable with $ is just a standard, not a requirement.

Backbone的源代码不到2000行，它有详细记录，易于阅读。我强烈建议大家深入了解它，以便轻松理解基本逻辑。

Backbone's source code is less than 2000 lines, it's well-documented and easy to read. I highly encourage everyone to dive into it to easily understand the underlying logic.

他们还提供 带注释的源页面 ，更容易阅读。

They also offer an annotated source page which is even easier to read.

• 从这里开始：骨干文档


• Backbone简介


• 骨干模式


• 使用Backbone的最佳做法

• Start here: Backbone documentation
• Introduction to Backbone
• Backbone patterns
• Best practices with Backbone

这篇关于Backbone：为什么要把'$（'＃footer'）`分配给`el`？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！