Backbone / Marionette JS：导航区域，chan

Question

我正在学习主干/木偶 js，并且我正在使用样板来这样做：https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate-Lite

我创建了 2 个视图（欢迎 / 文件）和 2 个区域：主要和标题。

在我的 headerRegion 中有我的导航栏，我想在更改或重新加载时处理我的菜单的“活动”类（模板：header.html）......但我不知道什么是最好的方法去做吧

我在 App.js 中定义了一个区域：

App.addRegions({
        headerRegion:"header",
        mainRegion:"#main"
});

在我的控制器中，我在初始化时创建了一个新的 HeaderView：

initialize:function (options) {
        App.headerRegion.show(new HeaderView(options));
}

这是我的 HeaderView ：

define([ 'marionette', 'handlebars', "App", 'text!templates/header.html'],
function (Marionette, Handlebars, App, template) {
    //ItemView provides some default rendering logic
    return Marionette.ItemView.extend({
        template:Handlebars.compile(template),
         initialize: function (options) {
          _.bindAll();
        },
        onRender : function(options){
          $('ul.nav li', this.$el).removeClass('active');
        }
    });
});

});

感谢您的帮助:)！

Answer 1

我在book on Marionette 中所做的是使用 Backbone.picky 来管理哪个标头模型是活动的，并在这种情况下添加适当的 CSS 类。你可以在这里看到相关的header模型选择：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/header/list/list_controller.js

当用户通过直接 URL（例如书签）进入应用程序时，我设置了正确的活动标题（例如 https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/contacts_app.js）