Backbone.js 父视图与子视图

Question

使用 Backbone.js 进行前端开发，是否有可靠的方法在渲染其各自的父视图之前渲染子视图？有这种模式吗？我能够渲染子视图，但我必须小心始终先渲染父视图。有没有一种模式可以在父母面前安全地渲染孩子？

Answer 1

有一种方法可以做到这一点，即使用 jQuery。 jQuery 有一个 find() 函数。 https://api.jquery.com/find/

假设我有一个 Backbone.View 实例，它创建并写入其自定义元素 (el)，默认情况下它是一个 div 元素。下面的代码在我的视图的渲染函数中：

              var self = this;

              var ret = EJS.render($template, {});  //get the template html

              self.$el.html(ret);  //put the html string into self.$el (still not in the DOM though!!)

              //Facebook's React.js lib
              React.render(
                  <TimerExample start={Date.now()} />,
                   $(self.el).find('#react-timer-example-div-id')[0]
               );


              React.render(
                  <MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
                  $(self.el).find('#react-menu-example-div-id')[0]
               );


             //using the two-way data binding lib "Rivets"
             Rivets.bind( $(self.el).find('#some-id')[0], {obj: exampleObj})

上述方法有效，我想说这是一个很好的解决方案，可以将子视图呈现给父视图，而无需先将父视图放在 DOM 中。正如我所说，诀窍是使用$(this.el).find('#xyz');。如果有更好的方法，我很想听听，但这似乎效果很好。

我上面用$template表示的模板，如下所示：

<div>
    <div id="react-timer-example-div-id">timer example goes here</div>
    <div id="react-menu-example-div-id">menu example goes here</div>
    <div id="some-id">blah blah</div>
</div>