如何避免在Backbone中使用空div进行模板包装？
当我创建视图主干时，如果未设置el，则创建空div容器。 模板(this.$el.html(this.template(this.model.toJSON())))插入该div中。 如何避免这个包装？ 我需要没有任何包装的干净模板，所以我可以将它插入我想要的任何地方？ 调用带有许多元素的jobView.$e.children() 。
/
var JobView = Backbone.View.extend({ template:_.template($("#contactTemplate").html()), initialize:function () { this.render(); }, render:function () { this.$el.html(this.template(this.model.toJSON())); return this; } }); var jobView = new JobView({ model:jobModel }); console.log(jobView.el);
我认为还没有提供这个问题的真正答案，只需从模板中删除div并将className属性添加到JobView ！ 这将导致您需要的标记：
模板：
风景：
var JobView = Backbone.View.extend({ className: 'job', // this class will be added to the wrapping div when you render the view template:_.template($("#contactTemplate").html()), initialize:function () { this.render(); }, render:function () { this.$el.html(this.template(this.model.toJSON())); return this; } });
当你调用render你将得到所需的标记：
<%= title %>/<%= type %>
<%= description %>
我认为最好的解决方案是：
render: function(){ var html = this.template(this.model.toJSON())); var newElement = $(html) this.$el.replaceWith(newElement); this.setElement(newElement); return this; }
对不起，对于迟到的回复，这可能已经解决了。 我发现尽可能轻松地尝试制作模板和视图。 我使用Handlebars作为我的模板。
无论使用何种模板，每个模板都需要有一个与之关联的HTML元素，因此在您的视图中选择您想要的任何元素并从模板中删除该元素，而不是试图反对这些元素。 然后，您可以在视图中设置属性以镜像已删除模板元素的属性。
var yourview = Backbone.View.extend({ { tagName : *whatever element ( ie section, div etc ), attributes : { id : 'your element id' class : 'your element class' etc }, })
然后在你的模板中删除该元素，这个元素将很好地创建而不包装你的模板，而不必更改你的渲染方法。
您可以将视图渲染到您喜欢的任何容器中，既可以自己指定$ el属性，也可以在调用render之前使用setElement()方法：
var jobView = new JobView({ model:jobModel }); jobView.setElement($('#your_selector_here')); console.log(jobView.el);
如果你查看View.el的文档，你会发现你也可以在编写视图时指定el属性，或者在构造函数中传递参数。
我与Backbone有同样的问题。 在我看来，这是一个设计缺陷。 这是一篇Redditpost，描述了一些可能的解决方案： http ： //www.reddit.com/r/javascript/comments/11pkth/how_do_you_render_your_backbonejs_views/
以下是Jeremy Ashkenas对此问题的看法：
| 如果我想在我的模板中完全封装HTML，而不创建任何额外的div，| 我必须更换this.el. 至少据我所知。 有没有更好的方法来做到这一点？
放弃你这样做的愿望，你会有一个更容易的时间;）Backbone总是为你提供一个视图元素（“el”）的一个重要部分是，你的事件在任何时候都是有效的 – – 无论视图是否在DOM中，数据是否已准备好，或模板是否可用。 声明鼠标和键盘事件是一种更无状态的方式，更少依赖于渲染所需的顺序。 如果您确实想要替换视图的元素，请使用setElement。 但它不是推荐的，也不是必需的。
无论好坏，在Backbone中，您应该使用视图提供的el ，并根据您的喜好使用该视图的tagName ， className ， id和attributes属性进行调整。
这种方法的明显问题是你混合搭配JS和HTML，就像没有明天一样。 在我看来，最好把事情分开; 应该与模板一起指定el的特征。
2014年，我编写了一个旨在解决问题的插件组件： Backbone.Declarative.Views 。 它可能是我所有开源软件中最被低估的东西，但它的工作做得很好。
怎么样？
将Backbone.Declarative.Views包含到您的项目中。 然后，将这些el -defining属性放入模板的数据属性中。
现在，如果您的视图有一个template: "#my-template"属性，则将其设置为
就是这样，真的。 有关完整的详细信息，请查看文档 。
为什么数据属性？
使用数据属性解决了将HTML相关内容保留在HTML文件和模板中以及Javascript之外的基本问题。 同时，这种方法与Backbone中通常完成的方式完全兼容 。
即，所有现有的Backbone模板继续按照它们的方式工作，就像在Javascript中分散的所有tagName定义仍然像往常一样应用 。 避免了与其他Backbone扩展和插件的冲突，并且无需更改遗留代码。 这使得Backbone.Declarative.Views可以安全地包含在几乎任何项目中。