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

Question

I am having a problem with dynamically loaded views not being able to attach to the this.el scope variable.我遇到了动态加载的视图无法附加到this.el scope 变量的问题。

To illustrate what I am trying to achieve:为了说明我想要实现的目标：

HTML PAGE HTML 页

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

Now if I had a view called View.PageSetUp that will add a couple of set up divs to #appWrap I get:现在，如果我有一个名为 View.PageSetUp 的视图，它将向 #appWrap 添加几个设置 div，我得到：

HTML PAGE - View.AppSetUp 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>

My problems come when I want to add a specific view to the content stage because this.el will not see the dynamically loaded $('#content') .当我想将特定视图添加到内容阶段时，我的问题就出现了，因为this.el不会看到动态加载的$('#content') 。

Trying to then reload the this.el in the initialize function turned out to be a BIG no no… it didn't like it.然后尝试在初始化 function 中重新加载 this.el 原来是一个很大的不不......它不喜欢它。

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

It feels like dynamically loaded templates and views must be viable in a javascript application, so how would I make this work?感觉动态加载的模板和视图在 javascript 应用程序中必须是可行的，那么我将如何使其工作？

I guess one possibility is that when I am loading my scripts the el is set up then and there:我想一种可能性是，当我加载我的脚本时，el 会在那里设置：

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

Should I be using a loader to make this work?我应该使用装载机来完成这项工作吗？ If so, any recommendations?如果是这样，有什么建议吗？ I have experience with required but would it be too much for something so simple?我有必要的经验，但是对于这么简单的事情来说会不会太多？

Thanks for your help!谢谢你的帮助！

Answer 1

I've worked out the solution to this, so I'll leave it here incase anyone else has the same problem.我已经解决了这个问题，所以我会把它留在这里，以防其他人有同样的问题。

Basically I was setting el in the view itself:基本上我是在视图本身中设置el ：

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

Where I should have set it when I called a new instance of the view.当我调用视图的新实例时，我应该在哪里设置它。

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

All seems to work anyway!无论如何，一切似乎都有效！

Answer 2

You can set el in the view itself, but do it with tagName, className and id.您可以在视图本身中设置el ，但使用 tagName、className 和 id 进行设置。 Something like this:像这样的东西：

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