Wie verschachtelte ViewComponents in Einschienen und NVelocity zu schaffen?

Question

Ich bin gebeten worden, um das Menü auf einer Website zu aktualisieren, wir halten. Die Website verwendet Castle Windors Einschienen und NVelocity als Vorlage. Das Menü wird zur Zeit als Maß Subklassen von ViewComponent gemacht, die li-Elemente machen. Im Moment gibt es nur eine (horizontale) Ebene, so der derzeitige Mechanismus in Ordnung ist.

Ich habe Menüs einige der vorhandenen Dropdown-Menüs hinzuzufügen gefragt. Da dies das erste Mal ist, habe ich Monorail- und NVelocity gesehen, ich bin ein wenig verloren.

Was zur Zeit existiert:

<ul>
    #component(MenuComponent with "title=Home" "hover=autoselect" "link=/")
    #component(MenuComponent with "title=Videos" "hover=autoselect")
    #component(MenuComponent with "title=VPS" "hover=autoselect" "link=/vps")                                   
    #component(MenuComponent with "title=Add-Ons" "hover=autoselect" "link=/addons")                    
    #component(MenuComponent with "title=Hosting" "hover=autoselect" "link=/hosting")                           
    #component(MenuComponent with "title=Support" "hover=autoselect" "link=/support")                           
    #component(MenuComponent with "title=News" "hover=autoselect" "link=/news")
    #component(MenuComponent with "title=Contact Us" "hover=autoselect" "link=/contact-us") 
</ul>

Ist es möglich, verschachtelte MenuComponents zu haben (oder ein neues SubMenuComponent) so etwas wie:

<ul>
    #component(MenuComponent with "title=Home" "hover=autoselect" "link=/")
    #component(MenuComponent with "title=Videos" "hover=autoselect")
    #blockcomponent(MenuComponent with "title=VPS" "hover=autoselect" "link=/vps")                                  
        #component(SubMenuComponent with "title="Plans" "hover=autoselect" "link=/vps/plans")
        #component(SubMenuComponent with "title="Operating Systems" "hover=autoselect" "link=/vps/os")
        #component(SubMenuComponent with "title="Supported Applications" "hover=autoselect" "link=/vps/apps")
    #end
    #component(MenuComponent with "title=Add-Ons" "hover=autoselect" "link=/addons")                    
    #component(MenuComponent with "title=Hosting" "hover=autoselect" "link=/hosting")                           
    #component(MenuComponent with "title=Support" "hover=autoselect" "link=/support")                           
    #component(MenuComponent with "title=News" "hover=autoselect" "link=/news")
    #component(MenuComponent with "title=Contact Us" "hover=autoselect" "link=/contact-us") 
</ul>

ich brauche das Untermenü (ul und Li Elemente) innerhalb der Methode Render auf MenuComponent außer Kraft gesetzt zu zeichnen, so nested ViewComponent Derivaten möglicherweise nicht. Ich möchte eine Methode, die im Grunde deklarative Methode halte Menüs zum Erstellen, wenn überhaupt möglich.

edit: Ich kann Context.RenderBody () verwenden, um die verschachtelte ViewComponent derivitives zu machen, aber sie sind vor dem Elternteil gemacht werden. Ich denke, das Zerreißen der Untermenüs müssen irgendwie als Mutter in den gleichen Ausgang anschließen?

Answer 1

Mein ursprünglicher Render-Methode sieht aus wie

public override void Render()
{
    var buffer = new StringBuilder();           
    var extraClass = _hoverState == MenuHoverState.Selected ? "class=\"Selected\"" : "";

    // Menu Item Start
    buffer.Append("<li><a href=\"" + ComponentParams["link"] + "\"" + extraClass + ">");

    // Menu Text
    buffer.Append(ComponentParams["title"]);

    // Menu Item End
    buffer.Append("</a></li>");                     
    RenderText(buffer.ToString());
}

Ich musste in die Context.Writer Haken:

public override void Render()
{
    var buffer = new StringBuilder();           
    var extraClass = _hoverState == MenuHoverState.Selected ? "class=\"Selected\"" : "";

    // Menu Item Start
    buffer.Append("<li><a href=\"" + ComponentParams["link"] + "\"" + extraClass + ">");

    // Menu Text
    buffer.Append(ComponentParams["title"]);

    // Menu Item End
    buffer.Append("</a><ul class=\"subMenu\" style=\"display:none;\">");                        
    Context.Writer(buffer.ToString());
    Context.RenderBody(Context.Writer);
    Contet.Writer("</ul></li>");    
}

Answer 2

kann ich Context.RenderBody () verwenden, um die verschachtelte ViewComponent derivitives

zu machen

in Ihrer Methode überschreibt Render, Sie so etwas wie

verwenden könnten

RenderView("header");
RenderBody();
RenderView("footer");

und verwenden vielleicht RenderSection nützlich sein könnte in der Lage sein, einige Teile aus der Vorlage zu überschreiben Sie die Komponente verwenden

if(HasSection("header")){
    RenderSection("header");
} else {
    RenderView("header");
}

es ist auch möglich, itterate und den Kontext ändern:

for(var item in this.SubItems){
    PropertyBag["item"] = item;
    if(HasSection("item")){
        RenderSection("item");
    } else {
        RenderView("item");
    }
}

all diese Lösung sind extravagant, aber ich ziehe es generaly eine viewcomponent, die einen Zweck spezifische Ansichtsmodell nimmt (sagen HierarchicalMenuViewModel) als Parameter und halten Sie die Templat-Logik einfach, es ist viel einfacher zu bedienen und Ausgang Anpassung passieren

zumindest für einfache Bedienung (das wäre verdient manchmal nur einen Makro oder teilweise in Abhängigkeit von der Viewengine).

Am Ende dargestellt viewcomponent Konzepte, die oben sind immer noch schön zu haben, wenn die Steuerung zu tun, das mehr Anpassung benötigen. Eine Beratung ist darauf zu achten, die Rendering-Logik zu dokumentieren, oder es einfach (<= 10 Zeilen in Render-Verfahren)