Templates 是否使用主干网'；动态创建的。el是否将模板与视图耦合？

我正在学习如何在我正在从事的一个项目中使用主干网，并对在主干网中解耦视图和模板的最佳实践提出了疑问。特别是动态生成的

View.el

和

View.$el

的最佳用途是什么

文档中说View.el

是从视图的标记名、类名、id和属性（如果指定）创建的。如果不是，el是一个空div。

问题1:

在设置视图的属性、id和类名时，这是否会使视图和模板文件高度耦合，以至于如果设计师想要调整模板，他们需要访问视图

例如，我有一个jQuery移动列表，其中属性和类名决定了列表的外观：

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c"
class="ui-btn ui-li ui-li-has-thumb ui-btn-up-c"></li>

当它是根视图时，将目标id传递给视图构造函数，并在我的呈现函数中调用：

$(this.target).append(View.$el.html());

或者，如果是调用另一个视图的视图：

$("#target_id").append(view.render.$el.html());

---

这是一种可行的方法/实践，还是我应该使用其他最佳实践？

据我所知，设计师可以修改模板。您只需将模板注入主干视图，例如，在初始化时通过其ID调用模板。然后通过将视图插入由“el”标识的父容器（可能是类或id）来渲染视图

要更改视图的样式，只需更改模板。视图的逻辑和它的外观被这种方法分开

一位设计师创造了我
（函数（$）{
var myView=Backbone.View.extend({
初始化：函数（选项）{
this.template=options.template；
},
渲染：函数（）{
var compiled=\ u0.template（this.template）；
这个.$el.html（编译（{}））；
归还这个；
}
}),
视图=新建myView({
el:$（'链接'），
模板：$（'#templ'）.html（）
});
view.render（）；
})（jQuery）；

---

所有属性都可以描述为函数，因此您可以在渲染之前对其进行操作：

var MyView = Backbone.View.extend({
    className: function() {
        return this.options.dynamicClassName + ' always-here';
    },
    id: function() {
        return this.options.dynamicId;
    },
    tagName: function() {
        return this.options.dynamicTagName;
    },
    render: function() {
        return this;
    }
});

var myView = new MyView({
    dynamicClassName: 'test',
    dynamicTagName: 'li',
    dynamicTd: 'blah'
});

也可以不在视图中定义它：

var myView = var myView = new MyView({
    className: 'test',
    tagName: 'li',
    id: 'blah'
});

1）

el

实际上并不适用于模板（即在呈现之前），而是用于将视图与

DOM

绑定。 定义视图时，可以通过指定

el

将

选择器

传递给视图

var MyAwesomeView = Backbone.View.extend({
    el: '#some_node',
    ...
});

var myView = new MyAwesomeView({
  el: '#some_other_node',
  ...
});

或者当您实例化视图时

var MyAwesomeView = Backbone.View.extend({
    el: '#some_node',
    ...
});

var myView = new MyAwesomeView({
  el: '#some_other_node',
  ...
});

您也可以像在@bentrm answer中一样传入

$

选择器，两者的结果几乎相同

您也不能指定任何

选择器

，只能指定

标记名

、

类名

或

id

。请查看以下源代码片段：

例如，您可以将该

li

作为模板，而不是将视图附加到

li

上，您可以将其附加到

ul

或

ol

2）

---

我想我已经解释了A。至于B，请看一下这个很棒的演示：

为什么要使用

$（this.el）

而不是？这没有任何意义，因为根据backbone.js文档，.el是动态生成的$（this.el）的缓存jQuery对象版本。我想当您使用.html（）时，它们可以互换使用，因为结果是一样的。如果您使用的是动态el生成，那么无论如何都不会使用.html（），因为它会覆盖动态生成的DOM元素。但是，为什么要增加计算已经缓存的内容的开销呢？每次你

$（this.el）

，你都在构建jQuery包装器，但是你已经有了

this。$el

所以

$（this.el）

是一种浪费。这是一个很好的观点。删除了我的编辑。还请注意，视图中有一种方法可以确保

el

，

$el

。。。我知道el不是我的模板，它只是存储我编译的模板的html。我正按照您所说的那样在父模板中将

li

的子视图附加到

ul

。但这并没有直接回答我的问题，而是强化了我的想法，即使用主干动态生成的

el

HTML对象并设置

标记名

，

类名

，等。属性不允许设计师纯粹在模板中更改el的类和属性。2）谢谢我看了演示文稿，它确实给了我一些如何改进代码的想法！1） 我想那是肯定的。因此，如果您不想限制如何生成模板，请不要使用动态生成

el

。只需将

el

的

selector

指定给要将模板注入的容器即可。希望这有帮助…这正是我正在做的，但是你的答案并没有回答我关于使用主干动态生成的

el

的问题。