将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中提供一个锚点来坚持它，我觉得它更自然，当只有一个元素的观点，它不会消失，使用现有的，清空的包装元素（通常是div或span ）作为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。
