Question

我遇到动态加载的视图无法附加到this.el范围变量的问题。

说明我想要实现的目标：

HTML PAGE

<html>
    <head> head stuff </head>
    <body>
          <div id="appWrap"></div>
    </body>
</html>

现在，如果我有一个名为View.PageSetUp的视图，它会为#appWrap添加几个设置div：

HTML PAGE - View.AppSetUp

<html>
    <head> head stuff </head>
    <body>
          <div id="appWrap">
                <div id="nav">buttons…</div>
                <div id="side">side stuff…</div>
                <div id="content"></div>
          </div>
    </body>
</html>

当我想要向内容阶段添加特定视图时，我的问题就出现了，因为this.el将看不到动态加载的$('#content')。

然后尝试在初始化函数中重新加载this.el，结果是大不了......它不喜欢它。

this.el = $('#content'); // rubbish idea!

感觉动态加载的模板和视图在javascript应用程序中必须是可行的，那么我将如何使其工作？

我想有一种可能性是，当我加载我的脚本时，el就会立即设置：

App.Views.Channel = Backbone.View.extend({
      ………………
})

我应该使用装载机来完成这项工作吗？如果有，任何建议？我有必要的经验，但对于这么简单的事情会不会太多？

感谢您的帮助！

Answer 1

我已经找到了解决方案，所以我会把它留在这里，因为其他人也有同样的问题。

基本上我在视图中设置了el：

App.Views.Channel = Backbone.View.extend({
  el : $('#myID'),
  ………………
})

当我调用视图的新实例时，我应该设置它。

newView = App.Views.Channel(model, { el: $("#search_container") });

无论如何，一切似乎都有效！

Answer 2

您可以在视图中设置el，但可以使用tagName，className和id进行设置。像这样：

App.Nav.View = Backbone.View.extend({
  tagName: "div",
  id: "nav",
  render: function() {
    /* Nav buttons */
  }
});

App.View = Backbone.View.extend({
  el: $("#appWrap"),
  initialize: function() {
    var appNavView = new App.Nav.View;
    $(this.el).append(appNavView.render().el);
  }  
});

appView = new App.View;

backbone.js this.el未在动态加载的视图上获取/选择

2 个答案: