Wie Datenbindung auf Klick-Funktion mit Knockout und Durandal

Question

Ich habe eine Topbar in meiner Anwendung, die in mehreren HTML-Dateien verwendet wird. Ich habe eine HTML-Vorlage dieser Topbar erstellt und ich füge diese HTML-Datei in alle anderen HTML-Dateien ein, in denen ich diese Topleiste brauche. Jetzt

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 

, erhalte ich die HTML-Datei und die topbar wird auf dem Bildschirm wiedergegeben. In dieser oberen Leiste habe ich ein Dropdown-Menü mit einem modalen Dialogfeld, das mit Datenbindung aufgerufen wird: Klicken Sie auf. Andere Links funktionieren gut, aber das Dialogfeld wird nicht einmal aufgerufen. Ich bin mir nicht sicher, was das Problem ist, vielleicht sollte ich nicht html innerhalb eines anderen html so in durandal aufrufen.

Dies ist mein Code für 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, erhalte ich die Drop-Down, aber ich habe nicht den Dialog Box, wenn ich auf Passwort ändern klicke. Ich hoffe, ich kann mein Problem erklären. Jede Hilfe wird sehr geschätzt.

Answer 1

Dies funktioniert nicht, weil Sie jQuery verwenden, um die Topbar-Vorlage in den richtigen Platz auf jeder Seite zu laden, anstatt zu verwenden, um es für Sie zu tun. Es ist die Durandal-Kompositions-Engine, die den Blick auf das View-Modell bindet.

Was Sie normalerweise tun sollten, wenn Sie Durandal verwenden, ist create a shell page for your application, und die obere Leiste befindet sich dort, gebunden mit Durandal, so dass Sie die Knockout click binding verwenden können. Vielleicht mit der Compose-Bindung. Auf der Shell-Seite ist dann ein Bereich definiert, der die "Seiten" enthält, aus denen der Rest Ihrer Anwendung besteht. Normalerweise würden Sie dafür die Router verwenden.

Ich benutze Durandal und der einzige Ort, wo ich jQuery in meiner gesamten Anwendung verwenden, ist in ein paar benutzerdefinierten Knockout bindings.