骨幹/木偶JS：導航區，陳

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類。你可以在這裏看到相關的頭型號選擇：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）