How to data-bind on click function using knockout and durandal

I have a topbar in my application which is being used in several html files. I made a html template of that topbar and I am including that html file in all the other html files where I need that topbar.

main.html

<style type = "text/css">

.glyphicon.glyphicon-user
{
font-size: 38px;
}

.glyphicon.glyphicon-refresh
{
font-size: 18px;
}
</style>

<div id="myElement">

<div id="includedContent"></div> // this is where included html file is rendered

 //here I have other contents 

</div>

main.js

$("#includedContent").load("./app/views/topbar.html"); // This is how I call that html file

Now, I get the html file and the topbar is rendered on the screen. In that top bar, I have a dropdown which has a modal dialog that gets called using data-bind : click. Other links are working fine but dialog box doesn't even get called. I am not sure what the problem is, maybe I should not call html inside another html like this in durandal.

This is my code for topbar

topbar.html

   <div class="container">
     <div class="navbar navbar-default blue-background">

    <div class="navbar-header pull-right">



        <ul class="nav navbar-nav" style="display:inline-block;">
            <div class="col-lg-4 col-md-4 col-sm-2 col-xs-2 ">

                <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1">
                    <li><a href="#sync"><span class="glyphicon glyphicon-refresh" style="color:white"></span></a></li>
                </div>

                <div style = "margin-right: 20px">
                    <li>
                        <div class="dropdown">
                            <span data-toggle="dropbtn" class="glyphicon glyphicon-user" style="color:white"></span>
                            <div class="dropdown-content">
                                <a  data-bind="click:ChangePassword" style="font-size: 14px; color:blue;" ><label>Change Password</label></a>
                                <a id="Logout" href="#" style="font-size: 14px; color:blue"><label>Logout</label></a>
                            </div>

                        </div>
                    </li>
                </div>

            </div>

        </ul>


    </div>



      </div>

   </div>

topbar.js

  define(['plugins/router', 'durandal/app', 'knockout','./changepassword'], function(router, app, ko,changepassword) {



return
{

    ChangePassword: function()
    {
      alert("!!!!!!");
       changepassword.show();

    }

 };
});

So, I get the dropdown but I don't get the dialog box when I click on change password. I hope I am able to explain my problem. Any help is greatly appreciated.

Solution

This isn't working because you're using jQuery to load the topbar template into the correct space on each page, rather than using Durandal's composition engine to do it for you. It's the Durandal composition engine that binds the view to the view model.

What you should typically be doing if using Durandal, is create a shell page for your application, and the topbar resides there, bound using Durandal, thus allowing you to use the Knockout click binding. Perhaps using the compose binding. The shell page then has an area defined to host the "pages" that make up the rest of your application. Typically you'd use the Router for this.

I'm using Durandal and the only place I use jQuery in my entire application is in a couple of custom Knockout bindings.