Question

如何创建“部分”并在我的Backbone应用程序中重复使用它们？例如，我应该遵循什么Backbone惯例/方法，这将允许我创建一个导航栏“视图”并在我的应用程序的所有视图中重复使用它？基本上，我正在寻找复制Rails的布局和部分。

Answer 1

此刻我一直在使用它的方式，在您的具体情况下，给定的导航栏，

我甚至没有应用视图，我得到了我的页面，其中包含某些默认的html。并且它包含一些视图占位符，主要内容，搜索视图，如上所述，导航栏视图。我不必在其他视图中重用导航视图因为它不在我的页面视图中。因此，当我更改页面时，导航保持

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

如果您真的想使用视图并重新使用它们看看由Tim Branyen https://github.com/tbranyen/backbone.layoutmanager开发的布局管理器，它是一个主干插件，可以完成你要求的许多事情。

我之前没有使用它，除了在小型测试应用程序中，但它看起来很有希望。

修改

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

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

    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对象上从任何地方引发事件，并听取这些事件并对其进行操作。

如何重用视图？

1 个答案: