如何构建基于 Backbone.View 的插件，以便可以单独扩展其嵌套视图

How can I structure a Backbone.View based plugin so that its nested views can be extended individually?

本文关键字：单独 扩展 视图 嵌套 插件 构建 何构建 View Backbone      更新时间：2023-09-26

我正在设计一个通用的对象浏览器插件，其功能类似于OS X的Finder列视图。我将界面分为几个嵌套视图，浏览器，列和对象。

我将在几种情况下使用此插件，其中浏览器视图、对象视图和列视图可能需要也可能不需要自定义。例如，有时对象将是文件和文件夹。

这是列视图中的OS X查找器，以防您不知道它的外观。

目前我正在使用 RequireJS 来传递依赖项，但是为了简单地继承和扩展 ObjectView，我必须替换整个堆栈。

有没有更好的结构可以扩展插件但只能扩展一部分？

浏览器视图.js

var BrowserView = Backbone.View.extend({
    open: function () {
        var collectionView = new CollectionView( {collection: objects} );
    }
});

收藏视图.js

var CollectionView = Backbone.View.extend({
    render: function () {
        this.collection.each( function (object) {
            var objectView = new ObjectView( {model: objects} );
            objectView.bind('click', this.select, this);
            this.container.append( objectView.el );
            objectView.render();
            this.objectViews.push(objectView);
        }, this );
    },
});

对象视图.js

var ObjectView = Backbone.View.extend({
});

我会把这些视图放在同一个模块中。

模块的目的 - 无论你使用的是RequireJS还是普通的旧JavaScript模块 - 都是为了特定目的封装一组相关的对象和函数。在本例中，您的目的是查找器视图。

通过将所有相关对象保留在同一文件中，您将在如何使对象协同工作方面拥有更大的自由度和灵活性。

作为旁注，但与你正在做的事情有关，你也许可以从我的Backbone.Marionette插件的"CompositeView"中获得一些关于如何完成这项工作的想法。我以前用它构建过文件夹和文件的分层树视图，并且 Finder 的列视图也很容易使用它构建。

请注意，我并不是建议您需要使用我的插件。相反，我认为它可能有助于弄清楚您希望如何构建代码。

我有一篇博客文章在这里谈论它：http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

您可以在此处找到代码和文档：https://github.com/derickbailey/backbone.marionette

复合视图的注释源代码在这里： http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-26

相关文章：