Durandal composing same view in foreach

Question

I have to compose same views in a hierarchy. Parent - Child1 - Child2

<div id="divParent" data-bind="with: ParentObs">
   <section data-bind="compose: { view: '../views/header', model: '../viewmodels/header', activate: true, cacheViews: false , preserveContext: true, activationData: id}"></section>

   <div id="idChild" data-bind="ChildObs">
       <section data-bind="compose: { view: '../views/header', model: '../viewmodels/header', activate: true, cacheViews: false , preserveContext: true, activationData: id}"></section>
   </div>
</div>

The properties in ParentObs and childObs is the same. Just the ParentObs contains a list of childs. Properties Are firstName and lastName which I am accessing using the id activation Data

Now I am Binding this in the composed view

The problem is the last Id to bind to the composed view is reflected all over the composed view. I want different data to be shown.

How do i achieve it.

header.html

<span data-bind="text: Properties().firstName"></span>
<span data-bind="text: Properties().lastName"></span>

header.js

define([],function(){
  var Properties = ko.observable();
  var activate = function(Id){
    Properties(getDataById(Id));
 }
});

getDataById is a breeze call

I have the same problem mentioned in this link. Can't understand the solution proposed

Answer 1

Use transient viewmodel. refer url: http://www.lobsterfs.co.uk/blog/singleton-transient-durandal/