using compose data-bind with another data-binding

Question

I'm using the Hot Towel template in visual studio 2013 with MVC 5,right now every page in my project has the default code that comes from hot towel, but I want to design a web site that looks like : http://blackrockdigital.github.io/startbootstrap-stylish-portfolio/ when i scroll down i can see different part of web site.but if i want to use Durandal and knock out I think I have to use

   "data-bind="compose: { view: 'footer' }"

my problem is, that when i use this line of code in my home page and then in my footer.html use another type of data binding (I have separate java script file for my footer page also) for example like text binding ,the text does not appear but if i do not use Compose binding it will work. so can some one tell me how can i build a web page like the one i want with hot towel and knock out,thanks a lot.

my footer view is like:

<nav class="navbar navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
    <span class="pull-left"><a href="http://johnpapa.net/spa" target="_blank">Learn how to build a SPA </a></span>
    <span class="pull-right">
        <a data-bind="attr: { href: pm, title: title }"></a>
    </span>
</div>
</nav>

and the footer.js :

define(['services/logger'], function (logger) {
var title = 'Home';
var pm = ko.observable('hi');
var vm = {
    activate: activate,
    title: title,
    pm:pm
};

return vm;

//#region Internal Methods

//#endregion

});

they are so simple just for checking the result

and my main page that i want to see the footer there:

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

But when I run my project the result is below:

Answer 1

The problem is that you are only specifying the view your footer should use but not the related view model for your view.

So, you would like to update your compose binding like so -

"data-bind="compose: { view: 'footer', model: 'footer' }"

I however, would suggest for using an observable to store your view and the corresponding model to leverage two way binding.

So, in your main viewModel, you would have an observable defined like so -

self.footer = ko.observable({
    view: 'footer',
    model: 'footer',
    activationData: anyDataYouWouldLikeToInitializeYourFooterWith
});

And then update your compose binding like so -

"data-bind="compose: footer"

This way, you can compose different views dynamically (in case they all show up one at a time) into your main view.