主干视图嵌套

发布于 2024-12-08 03:34:09 字数 2758 浏览 0 评论 0原文

我在兜圈子，似乎在我当前的应用程序中缺少一些实现backbone.js的东西。问题是我有一个主 AppView，它初始化页面的各种子视图（图形、信息表等）。我的愿望是能够根据导航时传递的参数标志来更改页面的布局。

我遇到的情况是，子视图引用了模板渲染后出现的 dom 元素，但在主 AppView 初始化过程中无法访问这些元素。所以主要问题是如何确保每个事件绑定过程都有正确的 dom 元素以正确设置？

使用以下代码，如果我有一个事件绑定到 LayoutView 中的模型更改，则布局将被渲染，但后续视图无法正确渲染。我摆弄的一些事情是将所有视图“.el”值设置为 html 结构中的静态元素。这使得渲染发生，尽管这似乎脱离了利用“.el”提供的良好的作用域能力。

示例代码：

//Wrapped in jquery.ready() function...
//View Code
GraphView = Backbone.View.extend({ // init, model bind, template, supporting functions});

TableView = Backbone.View.extend({ // init, model bind, template, supporting functions});

LayoutView = Backbone.view.extend({
  initialize: function() {
    this.model.bind('change:version', this.render, this);
  },
  templateA = _.template($('#main-template').html()),
  templateB = _.template($('#secondary-template').html()),
  render: function() {
    if ('main' == this.model.get('version')) {
      this.el.html(this.templateA());
    } else {
      this.el.html(this.templateB());
    }
  },
});

MainView = Backbone.View.extend({
  initialize: function() {
    this.layoutView = new LayoutView({
      el: $('#layoutContainer'),
      model: layout,
    });
    this.graphView = new GraphView({
      el: $('.graphContainer'), 
      model: graph
    });
    this.tableView = new TableView({
      el: $('#dataTableContainer', 
      model: dataSet
    });
  },
});

// Model Code
Layout = Backbone.Model.extend({
  defaults: {
    version: 'main',
  },
});

Graph = Backbone.Model.extend({});
dataSet = Backbone.Model.extend({});

// Router code...

// Fire off the app
AppView = new MainView($('#appContainer'));
// Create route, start up backbone history

HTML：为了简单起见，我只是重新排列了两个布局之间的 div。

<html>
  <head>
    <!-- include above js and backbone dependancies -->
  </head>
  <body>
    <script type="text/template" id="main-template">
      <div class="graphContainer"></div>
      <div class="dataTableContainer"></div>
      <div>Some other stuff to identify that it's the main template</div>
    </script>
    <script type="text/template" id="secondary-template">
      <div class="dataTableContainer"></div>
      <div>Rock on layout version two!</div>
      <div class="graphContainer"></div>
    </script>
    <div id="appContainer">
      <div id="nav">
        <a href="#layout/main">See Layout One</a>
        <a href="#layout/secondary">See Layout Two</a>
      </div>
      <div id="layoutContainer"></div>
    </div>
  </body>
</html>

感谢你们任何人可能拥有的见解/意见。谢谢！

原文

I'm running around in circles seemingly missing something in my current app implementing backbone.js. The problem is I have a master AppView, which initializes various subviews (a graph, a table of information, etc) for the page. My desire is to be able to change the layout of the page depending on a parameter flag passed along while navigating.

What I run into is a case where the subviews, which have reference to dom elements that would be in place after the template is rendered, do not have access to those elements during the main AppView initialization process. So the main question is how do I ensure that the proper dom elements are in place for each event bind process to get setup properly?

With the following code if I have an event bound to a model change within my LayoutView, the layout gets rendered but the subsequent views do not properly render. Some thing I have fiddled with has been to set all the views '.el' values to a static element within the html structure. This gets rendering to occur, though that seems to break away from the nice scoping ability provided by utilizing '.el'.

Sample Code:

//Wrapped in jquery.ready() function...
//View Code
GraphView = Backbone.View.extend({ // init, model bind, template, supporting functions});

TableView = Backbone.View.extend({ // init, model bind, template, supporting functions});

LayoutView = Backbone.view.extend({
  initialize: function() {
    this.model.bind('change:version', this.render, this);
  },
  templateA = _.template($('#main-template').html()),
  templateB = _.template($('#secondary-template').html()),
  render: function() {
    if ('main' == this.model.get('version')) {
      this.el.html(this.templateA());
    } else {
      this.el.html(this.templateB());
    }
  },
});

MainView = Backbone.View.extend({
  initialize: function() {
    this.layoutView = new LayoutView({
      el: $('#layoutContainer'),
      model: layout,
    });
    this.graphView = new GraphView({
      el: $('.graphContainer'), 
      model: graph
    });
    this.tableView = new TableView({
      el: $('#dataTableContainer', 
      model: dataSet
    });
  },
});

// Model Code
Layout = Backbone.Model.extend({
  defaults: {
    version: 'main',
  },
});

Graph = Backbone.Model.extend({});
dataSet = Backbone.Model.extend({});

// Router code...

// Fire off the app
AppView = new MainView($('#appContainer'));
// Create route, start up backbone history

HTML:
For simplicity I just rearranged the divs between the two layouts.

<html>
  <head>
    <!-- include above js and backbone dependancies -->
  </head>
  <body>
    <script type="text/template" id="main-template">
      <div class="graphContainer"></div>
      <div class="dataTableContainer"></div>
      <div>Some other stuff to identify that it's the main template</div>
    </script>
    <script type="text/template" id="secondary-template">
      <div class="dataTableContainer"></div>
      <div>Rock on layout version two!</div>
      <div class="graphContainer"></div>
    </script>
    <div id="appContainer">
      <div id="nav">
        <a href="#layout/main">See Layout One</a>
        <a href="#layout/secondary">See Layout Two</a>
      </div>
      <div id="layoutContainer"></div>
    </div>
  </body>
</html>

Appreciate insight/input that any of you guys may have. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

<逆流佳人身旁 2024-12-15 03:34:09

您的示例中缺少很多代码，但如果我理解正确的话，问题是您正在尝试渲染依赖于 LayoutView 生成的 HTML 的视图，但正在选择布局模型更新时异步，因此 LayoutView 尚未渲染。

有（与几乎所有与 Backbone 相关的所有内容一样）多种方法，但总的来说：

如果我有依赖于渲染的“父”视图的视图，我将负责实例化和渲染这些视图父视图中的视图 - 在本例中为 LayoutView，而不是 MainView。
如果父级正在异步渲染，则需要在回调中执行该实例化 - 这里是 LayoutView.render() 方法。

所以我可能会这样构造代码：

LayoutView = Backbone.view.extend({
  initialize: function() {
    this.model.bind('change:version', this.render, this);
    // you probably want to call this.model.fetch() here, right?
  },
  templateA: _.template($('#main-template').html()),
  templateB: _.template($('#secondary-template').html()),
  render: function() {
    if ('main' == this.model.get('version')) {
      this.el.html(this.templateA());
    } else {
      this.el.html(this.templateB());
    }
    // now instantiate and render subviews
    this.graphView = new GraphView({
      // note that I'm using this.$ to help scope the element
      el: this.$('.graphContainer'), 
      model: graph
    });
    this.tableView = new TableView({
      el: this.$('.dataTableContainer'), 
      model: dataSet
    });
    // you probably need to call graphView.render()
    // and tableView.render(), unless you do that
    // in their initialize() functions
  },
});

请注意，您不必在实例化时传入 el - 您可以在 initialize() 中实例化子视图，并设置subview.render() 中的 el 属性。您甚至可以像现在一样在 MainView.initialize() 中实例化，并将视图传递给 LayoutView 以异步渲染。但我认为上述方法可能更干净。

You've got a lot of missing code in your sample, but if I understand correctly, the issue is that you are trying to render views that depend on HTML generated by LayoutView, but the layout is being chosen asynchronously when the model is updated, so LayoutView hasn't been rendered yet.

There are (as with pretty much everything Backbone-related) multiple approaches to this, but in general:

If I have views who depend on a "parent" view being rendered, I'll put the responsibility for instantiating and rendering those views in the parent view - in this case, LayoutView, not MainView.
If the parent is being rendered asynchronously, it needs to perform that instantiation in the callback - here, the LayoutView.render() method.

So I might structure the code like this:

LayoutView = Backbone.view.extend({
  initialize: function() {
    this.model.bind('change:version', this.render, this);
    // you probably want to call this.model.fetch() here, right?
  },
  templateA: _.template($('#main-template').html()),
  templateB: _.template($('#secondary-template').html()),
  render: function() {
    if ('main' == this.model.get('version')) {
      this.el.html(this.templateA());
    } else {
      this.el.html(this.templateB());
    }
    // now instantiate and render subviews
    this.graphView = new GraphView({
      // note that I'm using this.$ to help scope the element
      el: this.$('.graphContainer'), 
      model: graph
    });
    this.tableView = new TableView({
      el: this.$('.dataTableContainer'), 
      model: dataSet
    });
    // you probably need to call graphView.render()
    // and tableView.render(), unless you do that
    // in their initialize() functions
  },
});

Note that you don't have to pass in an el at instantiation - you could instantiate subviews in initialize(), and set the el property in subview.render(). You could even instantiate in MainView.initialize(), as you do now, and pass the views to LayoutView to render asynchronously. But I think the above approach is probably cleaner.

回复收藏 0 原文

~没有更多了~