关于javascript：在主干js的视图中嵌套视图


Nesting Views within Views in backbone js

我正在与bone.js建立一些复杂的视图关系，并且我想知道从JavaScript性能的angular来看是否存在以下问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var viewOne = Backbone.View.extend({
         tagName : 'li',
         initialize : function() {
              this.v2 = new viewTwo({parent:this});
         },
         clickHideOne : function() {
              $(this.el).removeClass('selected');
         }
});

var viewTwo = Backbone.View.extend({
         tagName : 'a',
         initialize : function() {
              this.bind('click', this.clickHide, this);
         },
         clickHide(){
              $(this.el).removeClass('selected');
              this.options.parent.clickHideOne();
         }
});

这是两个视图之间的循环引用的一个非常简单的示例，为了使一个视图中的事件易于在视图链中传播，或在父视图中维护对对象的任何引用。是否存在任何可能会造成问题的情况，特别是与IE7中的DOM元素引用有关的潜在泄漏，还是有其他推荐的最佳实践来引用父视图。

此外，我了解我可以执行$(this.el).parent(\\'li \\')。removeClass(\\'selected \\');在viewTwo中，这不是重点……这只是我关于循环引用的问题的一个非常简单的示例。

让父视图负责子视图并不是一个坏主意，并且在Backbone 网中是很常见的情况。我在上面的代码中看到的问题是，子视图具有其父视图的知识。我建议在viewTwo中使用自定义事件，并将viewOne绑定到这些事件，然后做出相应的响应。

使用trigger()方法和bind()方法，这对于Backbone 网来说非常容易。

相关讨论

循环引用不是一个好主意。正如Kyle所说，将子视图明确引用其父视图也不是一种好习惯。显式引用应仅向下进入视图层次结构。也就是说，父视图具有对其所有子视图的显式引用，并调用子视图的方法与之交互是很好的，而且是典型的。 (有关创建和管理子视图的每种方法，请参见Backbone.Subviews mixin)。但是，最佳封装实践规定，视图永远不应具有显式引用或直接调用其兄弟姐妹或其父级的方法。

为了与兄弟姐妹或父母沟通，您知道以下三种选择：

  • 使用view.trigger()触发子视图(或同级视图)上的事件，然后让父(或同级)使用view.listenTo()监听该事件。此方法有效，但是当您希望子视图与其祖父等进行通信时，该方法开始崩溃。此外，如果将此方法与同级对象一起使用，则会创建不需要的显式依赖项。

  • 您可以使用Backbone.Courier，这是一个易于在视图层次结构中冒泡事件的插件。对于同级视图之间的通信，一个同级将一个事件冒泡传递给父级，然后父级直接调用另一个同级的方法。

  • 您可以使用事件聚合器充当子级与父级之间或同级之间的中间对象。这样，这些视图可以通过聚合器进行通信，而无需彼此明确引用。但是，此方法需要全局聚合器对象，并且还允许隐式依赖项的纵横交错，随着视图数量的增加，隐式依赖项可能变得难以管理。

    • 相关讨论

    嵌套是维护层次结构视图的一种好方法，可以为复杂的用户界面编写可维护的代码。在简单的示例中，几乎没有任何性能问题，但是在更复杂的情况下，您确实需要牢记嵌套的深度。
    例如，在成千上万的网格中不适当地使用复杂的单元格渲染器可能会使您的应用程序无法使用。在这种情况下，通常可以进行明智的优化。仅对可见的网格单元使用渲染器。