如何使用敲除和durandal在点击功能上进行数据绑定

Question

我的应用程序中有一个topbar，它正在几个html文件中使用。我制作了一个顶条的html模板，并将该html文件包含在我需要该顶条的所有其他html文件中。

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

现在，我得到了html文件，并在屏幕上呈现了topbar。在顶部栏中，我有一个下拉列表，其中有一个模式对话框，该对话框使用数据绑定调用：单击。其他链接工作正常，但对话框甚至并没有被调用。我不确定问题出在哪里，也许我不应该在durandal中这样的另一个html中调用html。

这是我的顶条代码

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();
    }
 };
});

所以，当我点击更改密码时，我得到了下拉列表，但没有得到对话框。我希望我能解释我的问题。非常感谢您的帮助。

Answer 1

这不起作用，因为您正在使用jQuery将topbar模板加载到每个页面的正确空间中，而不是使用Durandal的合成引擎来为您加载。Durandal合成引擎将视图绑定到视图模型。

如果使用Durandal，您通常应该做的是为您的应用程序创建一个shell页面，并且顶栏位于那里，使用Duradal进行绑定，从而允许您使用Knockout点击绑定。也许使用compose绑定。然后，shell页面定义了一个区域来承载构成应用程序其余部分的"页面"。通常你会使用路由器。

我使用的是Durandal，在我的整个应用程序中唯一使用jQuery的地方是在几个自定义Knockout绑定中。