javascript - 将 backbone.js View 附加到现有元素与将 el 插入 DOM

Question

我正在实现我的第一个实际的非教程 Backbone 应用程序，并且有两个关于使用 backbone.js 的方面的问题，我不太满意，这与注入(inject) View 的呈现 el 到 DOM 与使用现有元素作为 el。我想我会在这里为大家提供一些“教学时刻”，并感谢您的帮助。

我在网络上看到的大多数 Backbone View 示例在创建 View 时指定 tagName、id 和/或 className，从而创建一个与 DOM 无关的 el。它们通常看起来像:

App.MyView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
     ...
    },
    render: function () { 
        $(this.el).html(<render an html template>);
        return this;
    }
}); 

但是教程并不总是解释他们建议如何将呈现的 el 放入 DOM 中。我已经看到了几种不同的方式。所以，我的第一个问题是:调用 View 的 render 方法并将其 el 插入 DOM 的合适位置在哪里？ (不一定是同一个地方)。我已经看到它在路由器、 View 的初始化或渲染函数中完成，或者只是在根级文档就绪函数中完成。 ( $(function () )。我可以想象这些都有效，但是有正确的方法吗？

其次，我从一些 HTML 标记/线框开始，并将 html 部分转换为与主干 View 相对应的 js 模板。与其让 View 呈现一个未附加的元素并在 html 中提供一个 anchor 以将其插入，我觉得它更自然，当 View 只有一个元素并且它不会消失时，使用现有的空包装元素(通常是 div 或 span)作为 el 本身。这样我就不必担心在文档中找到插入我未附加的 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>

所以我的第二个问题的一部分是，对于一个基本静态的 View ，直接使用页面 HTML 中的现有元素作为我的 View 的 el 有什么问题吗？这样我就知道它已经在 DOM 中的正确位置，并且调用 render 将立即在页面上呈现 View 。我会通过将已经存在的元素作为“el”传递给我 View 的构造函数来实现这一点。这样一来，在我看来，我就不必担心将其粘贴到 DOM 中(使问题 1 变得毫无意义)，并且调用 render 将立即更新 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>

对于页面上的静态 View ，这是一种可行的方法吗？也就是说，只有这些 View 中的一种，并且在任何情况下都不会消失。或者，还有更好的方法？我意识到根据我使用 View 的方式，可能有不同的做事方式(即在路由器中、在父 View 中、在页面加载时等)，但现在我正在查看初始页面加载用例。

谢谢

Answer 1

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

您甚至可以将 el 作为 View 的属性。

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();
});

我的建议是，做有用的事...Backbone 的美妙之处在于它很灵活，可以满足您的需求。

就常见模式而言，通常我发现自己有一个主视图来跟踪浏览量，然后可能是 ListView 和单个项目 View 。

就初始化而言，另一种常见模式是使用某种 App 对象来管理内容...

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 大师。

玩得开心!