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

Question

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

为了说明我想要实现的目标：

HTML 页

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

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

HTML 页面 - 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') 。

然后尝试在初始化 function 中重新加载 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 个解决方案

解决方案1
2 已采纳 2011-07-05 16:52:17

解决方案2
1 2011-07-08 07:08:54

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-07-05 16:52:17

解决方案2 1 2011-07-08 07:08:54

解决方案1
2 已采纳 2011-07-05 16:52:17

解决方案2
1 2011-07-08 07:08:54