Aurelia: How can I modify sidebar content from ins

问题:

I'm trying to wrap my head around how "inner components" can adjust the content of "outer components". Let's say I have an application template that looks something like this:

<template>
    <div class="sidebar">
       <div>Some app-wide content</div>
       <div>
           <!-- I want to put some view-specific content here -->
       </div>
    </div>

    <div class="main-body">
        <router-view></router-view>
    </div>
</template>

Each subview wants to render different content to the sidebar. Obviously this would be easy if the subview included the sidebar area itself, but let's say it is important to preserve the structure and we don't want to replicate the boilerplate of the sidebar across every view.

Is there any way for a child view to declare "export this extra component for display in another place?" I imagine something like injecting the parent view and calling a method on it, but I can't figure it out from the documentation.

回答1:

Simple demo:

It's fairly simple, actually. Just import and inject your sidebar or any other viewmodel and call a method or update a property.

https://gist.run/?id=745b6792a07d92cbe7e9937020063260

Solution with Compose:

If you wanted to get more elaborate, you could set a compose view.bind variable to that your sidebar would pull in a different view/viewmodel based on the set value.

https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5

Alternate approach:

If you don't want to import, you could also use the eventAggregator to publish an event from the router view and subscribe to listen to that event from your sidebar and act accordingly. This would work well for a large app setting where you didn't want to tie them too closely together but wanted the sidebar to react correctly to unpredictable routing patterns by always responding when triggers were published.

https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0

回答2:

@LStarkey's <compose> solution is what I was looking for, but to help others I think it's worth mentioning two other viable solutions that were suggested to me in other forums:

1. View ports. You can specify multiple named router views in a template and then populate them by passing in a viewPorts object to the router instead of specifying a single moduleId. The best source of documentation is a brief blurb in the "Cheat Sheet" of the Aurelia docs.
2. Custom elements. It's a little more "inside-out" but you could define most of the outer content as a custom element that has slots for the sidebar and the main body; each child view would define this custom element and pass in the appropriate pieces.