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

Question

我的应用程序中有一个顶部栏，用于多个 html 文件。我制作了该顶栏的 html 模板，并将该 html 文件包含在我需要该顶栏的所有其他 html 文件中。

ma​​in.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>

ma​​in.js

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

现在，我得到了 html 文件，并且顶部栏呈现在屏幕上。在那个顶部栏中，我有一个下拉菜单，其中有一个使用 data-bind 调用的 模态对话框：单击。其他链接工作正常，但对话框甚至没有被调用。我不确定问题出在哪里，也许我不应该在 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 将顶栏模板加载到每个页面上的正确空间，而不是使用 Durandal's composition engine 为您完成。将视图绑定到视图模型的是 Durandal 组合引擎。

如果使用 Durandal，您通常应该做的是 create a shell page for your application，并且顶部栏位于那里，使用 Durandal 绑定，因此允许您使用 Knockout click binding。也许使用 compose 绑定。然后，shell 页面定义了一个区域来托管构成应用程序其余部分的“页面”。通常你会为此使用Router。

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