Referencing external view with durandal compose binding

Question

I have my project structure:

App
        - Admin
            - views
            - viewmodels
            - main.js  
        - User
        - SuperUser
        - Common
            - views
            - viewmodels

Each role in my WebSite has it's own durandal SPA with main.js and other blackjack.

Now the question,

in my shell.html in Admin SPA I want to use view from Common folder.

In case of view in Admin I simply do compose binding:

<div>
    <header data-bind="compose: { view: 'nav' }"></header>
        <section id="content" class="main container-fluid shell"
                 data-bind="router: { transition: 'entrance'}"></section>
        <footer data-bind="compose: { view: 'footer' }"></footer>
</div>

And views from App/Admin/views are available. How can I reference views from App/Coomon/views/*?

It's simple with js component, I just declare as a module and then pass it to the define. And I just stuck with views.

I tried smth like:

    <div>
            <header data-bind="compose: { view: '../Common/views/nav' }"></header>
            <header data-bind="compose: { view: '../../Common/views/nav' }"></header>
        </div>

Any ideas? Thanks.

Answer 1

You're on the right way with relative paths. Only add .html to the view and it will work.

For example in your folder structure:

In the admin views, for example adminShell.html you can compose the nav.html in Common/Views by using:

compose: { view: '../../Common/views/nav.html }

By looking in the source code I found a better way. There is a undocumented (I haven't found the documentation yet) feature for the compose binding. You can specify an area where the view is located. So for the given example you should come with:

compose: { view: 'views/nav', area: 'Common' }