Javascript 如何重用视图？

如何创建“部分”并在整个主干应用程序中重复使用它们？例如，我应该遵循什么样的主干约定/方法来创建导航栏“视图”，并在应用程序的所有视图中重复使用它？本质上，我希望复制Rails的布局和部分

此时此刻我使用它的方式， 在您的特定情况下，给定的导航栏

我甚至没有应用程序视图，我得到了我的页面，其中有一些默认的html。 它为视图、主要内容、搜索视图保留了一些占位符， 如前所述，导航栏视图。我不必在其他视图中重复使用导航视图 因为它不在我的页面视图中。因此，当我更改页面时，导航将保持不变

它侦听从路由器调用的某些事件，并将根据该事件的参数更改我的导航视图的状态

但是，如果您确实希望使用视图并重用它们 看看Tim Branyen正在开发的layout manager，它是一个主干插件，可以完成您要求的许多事情

我以前没有使用过它，除了在一个小的测试应用程序中，但它看起来很有前途

编辑

根据要求，这里有一些示例代码，我解释了如何使用导航在这个应用程序中工作， 它可能不是最高级的演示，但它只是一个如何从一个视图更改另一个视图的想法

我的代码中定义了一个事件聚合器：

    var eventAggregator = _.extend({}, Backbone.Events);

我有一个导航视图：

    Navigation.Views.Nav = Backbone.View.extend({

        initialize: function () {
            eventAggregator.bind("navigation:route", this.highlight);
        },

        highlight: function (arg) {
            $('.active', this.el).removeClass('active');
            $('li', this.el)
                .filter(function () {
                    return $(this).data('nav') == arg;
                })
                .addClass('active');
        }

    })

// for the size of the code, i removed many elements, and only left the most important parts,
// as you can see, the navigation view, binds to my event event aggregator object, to listen to any 'navigation:route' event.

当然，我有一个路由器可以加载其他视图：

    Movies.Router = Backbone.Router.extend({

        views: {},

        initialize: function () {
            this.showView = App.showView;
            this.views.Edit = new Movies.Views.Edit({});
            this.views.List = new Movies.Views.List({ collection: Movies.List });
            this.views.Detail = new Movies.Views.Detail({});
        },

        routes: {
            "movies": "loadMovies",
            "movies/add": "addMovie",
            "movie/:slug": "loadMovie",
            "movie/:slug/edit": "editMovie"
        },

        // show the list of all movies.
        loadMovies: function () {
            this.showView(this.views.List);
            eventAggregator.trigger('navigation:route', 'movies');
        },

        // find the movie with the given slug, and render it to the screen.
        loadMovie: function (slug) {
            this.views.Detail.model = Movies.List.detect(function (movie) {
                return movie.get('Slug') === slug;
            });
            this.showView(this.views.Detail);
            eventAggregator.trigger('navigation:route', 'movies');
        },

        // find the movie with the given slug, and render it's edit template to the screen.
        editMovie: function (slug) {
            this.views.Edit = Movies.List.detect(function (movie) {
                return movie.get('Slug') === slug;
            });

            this.showView(this.views.Edit);
            eventAggregator.trigger('navigation:route', 'movies');
        }
    });

// most important part here is, you see how every routing function, has the  eventAggregator.trigger('navigation:route', 'movies'); which basically triggers the event (on the eventAggregator, the above listed view, binds to that event and when it comes in it calls a function, in my case this just sets an active class on the menu item.

所以，虽然我不是从另一个角度来调用1视图，但这是相同的原则，

---

您可以在eventAggregator对象上的任何位置引发事件，并侦听这些事件并对其采取行动

您能否澄清一下您是如何管理导航栏中的

事件的？此外，您是如何处理分页之类的事情的，在这种情况下，依赖默认HTML不是一个选项？