HotTowel 模式对话框

Question

最近，我使用网上找到的一个模板启动了我的第一个 Visual Studio Knockout/Breeze 应用程序，我希望打开一个类似于这样的模式对话框：

 <a href="#openModal">Open Modal</a>

 <div id="openModal " class="modalDialog">
           <a href="#close" title="Close" class="close">X</a>
           <div data-bind="foreach: userDetails">                   
               <p>User details go here</p>
               <p data-bind="text: $data.name" />
               <p data-bind="text: $data.role" />                        
           </div>                   
</div>    

这里是 CSS

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
border:2px solid #4cff00;
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events:stroke;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border:1px solid;
border-color: #fee209;
border-radius: 1px;
background: #b5a526;
background: -moz-linear-gradient(#b5a526, #000);
background: -webkit-linear-gradient(#b5a526, #000);
background: -o-linear-gradient(#b5a526, #000);
}

.close {
background: #FFFFFF;
color: #204510;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }    

这很好用，但现在我正在尝试使用 hotTowel 将其实现到淘汰赛/微风应用程序中。现在，当我单击链接按钮时，我收到“未找到路线”的警告，并且没有弹出窗口。我收集 hotTowel 认为我正在尝试在某个地方导航，有没有办法告诉它在这种情况下不要？还是因为 hotTowel 使用 html 而不是 cshtml 作为视图？我不能用 hotTowel 这样做吗？

Answer 1

它当然认为你正在尝试导航，你对它有什么期望

<a href="#close" title="Close" class="close">X</a>

如果不是导航？这就是锚标签在具有href 属性时的作用。您得到的是路由异常而不是 404，因为导航被路由器拦截，并且 #close 与您定义的任何路由都不匹配，但这不会改变基础问题。

如果你想要一个点击处理程序，那么你应该定义一个点击处理程序而不是导航锚。

在作用域内编写一个 JS 函数。对此最明智的地方是作为您的视图模型的方法，因为验证需要访问我希望您绑定到视图模型的任何收集的数据。

然后绑定它。如果锚标记对您的样式很重要，您可以保留它，但将 href 属性替换为 data-bind="click: yourVM.theMethod"

或者（假设您在 VM 上放置了一个方法）您可以使用像 $root.theMethod 这样的绑定引用。你也可以使用相对参考，如果你不知道那是什么，我强烈建议你do the tutorials。