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

Question

我正在实现我的第一个实际的非教程Backbone应用程序,并且有关于使用backbone.js的一个方面的2-ahh问题,这对我来说并不是很好,这涉及将视图渲染el到DOM中而不是使用一个现有的元素el.我怀疑我会在这里为你们提供一些"受教育的时刻",并感谢你的帮助.

我在Web中看到的大多数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中.我已经看到了几种不同的方式.所以,我的第一个问题是:调用视图的渲染方法并将其插入DOM的适当位置在哪里？(不一定是同一个地方).我已经看到它在路由器,视图的初始化或渲染函数中完成,或者仅在根级文档就绪函数中完成.($(function ()).我可以想象这些都有效,但有没有正确的方法呢？

其次,我从一些HTML标记/线框开始,并将html部分转换为与骨干视图对应的js模板.而不是让视图渲染一个未连接的元素并在html中提供一个锚点来粘贴它,我觉得它更自然,当只有一个元素的视图,它不会消失,使用现有的,清空的包装元素(通常是a 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>

因此,我的第二个问题的一部分是,对于一个基本上静态的视图,使用页面HTML中的现有元素作为我的视图是否有任何问题el？这样我就知道它已经在DOM中,在正确的位置,并且调用render将立即在页面上呈现视图.我会通过将已经在exixting元素传递给我视图的constsructor作为'el'来实现这一点.这样,在我看来,我不必担心将其粘贴到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>

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

谢谢

Answer 1

将视图附加到现有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();
});

我推荐的是,做什么有用...... Backbone的美妙之处在于它具有灵活性并能满足您的需求.

就普通模式而言,通常我发现自己有一个主视图来跟踪视图,然后可能是列表视图和单个项目视图.

关于初始化的另一个常见模式是使用某种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大师.

玩得开心!

Answer 2

您还可以将HTML DOM Element对象作为选项的"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')
    });
});