将backbone.js视图附加到现有元素与将el插入到DOM中

我正在实现我的第一个实际的非教程Backbone应用程序,并且有关使用backbone.js的一个方面的2-ish问题,这个方面与我不一致,这涉及到将视图的呈现的el注入DOM vs.使用el的现有元素。 我怀疑我会在这里为您提供几个“可教授的时刻”,并感谢您的帮助。

在Web中看到的大多数Backbone View示例在创build视图时指定tagName,id和/或className,从而创build一个从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,或只是在根级文档就绪function完成。 ( $(function () )。我可以想象任何这些工作,但有一个正确的方法来做到这一点?

其次,我从一些HTML标记/线框开始,将html部分转换为与骨干视图相对应的js模板。 而不是让视图渲染一个独立的元素,并在html中提供一个锚点来坚持它,我觉得它更自然,当只有一个元素的观点,它不会消失,使用现有的,清空的包装元素(通常是divspan )作为el本身。 这样,我不必担心在文档中find插入未连接的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 stuff in here --> </div> </div> 

因此,我的第二个问题的一部分,对于一个基本静态的视图,是否有什么不正确的使用页面的HTML中的现有元素作为我的视图的el ? 这样,我知道它已经在DOM中,在正确的位置,并调用渲染将立即渲染页面上的视图。 我会通过将已经存在的元素传递给我的视图的常量作为“el”来实现这一点。 这样,在我看来,我不必担心把它粘贴到DOM(使问题1的模拟),并调用渲染将立即更新DOM。 例如

 <form> <div someOtherStuff> </div> <span id="myView"> </span> </form> <script type="text/template" id = "myViewContents"> . . . </script> <script type="application/javascript"> window.MyView = Backbone.View.extend( { initialize: function () { this.template = _.template($('#myViewContents').html()); this.render(); }, render: function () { $(this.el).html(this.template()); return this; } }); $(function () { window.myView = new MyView({ el: $('#myView').get(0) }); }); </script> 

这是一个好方法来做到这一点在页面上的静态视图? 即只有其中一种观点,在任何情况下都不会消失。 或者,还有更好的方法? 我意识到,根据我如何使用视图,可能有不同的方法来做事情(即,在路由器,父视图,页面加载等),但现在我正在查看初始页面加载用例。

谢谢

将视图附加到现有DOM节点的想法绝对没有错。

你甚至可以把el作为你的视图上的一个属性。

 window.MyView = Backbone.View.extend( { el: '#myView', initialize: function () { this.template = _.template($('#myViewContents').html()); this.render(); }, render: function () { this.$el.html(this.template()); // this.$el is a jQuery wrapped el var return this; } }); $(function () { window.myView = new MyView(); }); 

我推荐的是,做什么工作…骨干的美是它是灵活的,将满足您的需求。

就常见模式而言,通常情况下,我发现自己的主要观点是跟踪观点,然后是列表视图和单个项目视图。

就初始化而言,另一个常见的模式是使用某种App对象来pipe理东西。

 var App = (function ($, Backbone, global) { var init = function () { global.myView = new myView(); }; return { init: init }; }(jQuery, Backbone, window)); $(function () { App.init(); }); 

就像我之前说过的那样,没有错误的做法,只是做一些有用的事。 🙂

如果您需要任何帮助,请随时在twitter @ jcreamer898上打我,还可以查看@derickbailey,他是一位BB大师。

玩的开心!

您还可以将HTML DOM元素对象作为选项的“el”属性发送到视图中。

 window.MyView = Backbone.View.extend( { initialize: function () { this.template = _.template($('#myViewContents').html()); this.render(); }, render: function () { this.$el.html(this.template()); // this.$el is a jQuery wrapped el var return this; } }); $(function () { window.myView = new MyView({ el: document.getElementById('myView') }); }); 

使用委托事件方法:

 initialize: function() { this.delegateEvents(); } 

要明白为什么: http : //backbonejs.org/docs/backbone.html#section-138附近“设置callback,其中”

看起来也像这几天,你可以setselement。