Question

我的应用程序中有一个顶部栏，正在几个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文件，并在屏幕上呈现了顶部栏。在那个顶部栏中，我有一个下拉列表，其中有一个模态对话框，可以使用数据绑定：点击进行调用。其他链接工作正常，但甚至没有调用对话框。我不确定问题是什么，也许我不应该在 durandal 中调用html中的html。

这是我的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();

    }

 };
});

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

Answer 1

这不起作用，因为您使用jQuery将顶部栏模板加载到每个页面上的正确空间，而不是使用Durandal's composition engine为您执行此操作。它是将视图绑定到视图模型的Durandal合成引擎。

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

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

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

1 个答案: