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

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.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 将顶部栏模板加载到每个页面上正确的 space，而不是使用 Durandal's composition engine 为您完成.它是将视图绑定到视图模型的 Durandal 组合引擎。

如果使用 Durandal，您通常应该做的是 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 为此。

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

中

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

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

jquery

knockout.js

durandal