Marionette LayoutAfficher les régions - Afficher hors ArticleVoir le contenu

Question

J'utilise actuellement Marionette 2.4.7 et mon application est structurée en utilisant LayoutViews. Prenez le très simple exemple LayoutViews (normalement les templates sont séparés):

var LayoutView = Marionette.LayoutView.extend({ 
    template: "<div id="main-region"></div><div id="menu-region"></div>", 
    regions: { 
     mainRegion: "#main-region", 
     menuRegion: "#menu-region" 
    } 
}); 

var MainLayoutView = Marionette.LayoutView.extend({ 
    template: "<div id="title-region"></div><div id="content-region"></div>", 
    regions: { 
     titleRegion: "#title-region", 
     contentRegion: "#content-region" 
    } 
}); 

Fondamentalement, la page est divisée en deux sections, une section pour afficher la page titre et une section pour afficher le contenu principal. Je peupler la région du contenu en utilisant les éléments suivants:

var layoutView = new LayoutView(); 

    var mainLayoutView = new MainLayoutView({ className: "someClass" }); 
    layoutView.mainRegion.show(mainLayoutView); 
    var contentLayoutView = new ContentLayoutView(); 
    mainLayoutView.contentRegion.show(contentLayoutView); 

Le ContentLayoutView a des sous-régions et fait beaucoup d'autres choses, est donc tout à fait une vue complexe. Le titleRegion du MainLayoutView n'affiche que quelques mots, donc très simple.

Maintenant, à ma question, est-il possible de contourner le besoin de créer un ItemView pour le titleRegion, juste pour afficher quelques mots? Ce scénario est répété plusieurs fois tout au long de mon application et il semble nécessaire de créer un ItemViews distinct pour chaque cas. Je sais que je peux régler le DIV HTML en utilisant:

$("#title-region").html("Page title"); 

mais je veux rester à la façon Marionette de faire les choses.

J'ai essayé:

mainLayoutView.titleRegion.show("Page name"); 

mais je reçois l'erreur: 'view.on' is not a function, évidemment parce que le .show attend un ItemView/LayoutView.

Answer 1

J'inclurais probablement le titre dans le modèle de mainLayoutView. Je ne sais pas quelle langue templating que vous utilisez, mais il pourrait ressembler à:

"<div id="title-region">{title}</div><div id="content-region"></div>"

Ensuite, vous pouvez définir une fonction templateHelpers dans votre définition MainLayoutView comme:

templateHelpers: function() { 
    return { title: this.options.title }; 
} 

Lorsque vous créez votre MainLayoutView alors vous passer à quelque titre que vous avez besoin:

var layoutView = new LayoutView(); 
var mainLayoutView = new MainLayoutView({ 
              className: "someClass", 
              title: "Welcome!" 
             }); 
layoutView.mainRegion.show(mainLayoutView); 
var contentLayoutView = new ContentLayoutView(); 
mainLayoutView.contentRegion.show(contentLayoutView); 

title peut effectivement déjà être une propriété sur la vue (je ne me souviens pas), donc vous devrez utiliser layoutTitle ou quelque chose comme ça dans les endroits que j'ai utilisés title