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 将其实现到 knockout/breeze 应用程序中。现在，当我单击 link 按钮时，我收到 'No Route Found' 的警告，并且没有弹出窗口。我收集到 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.

HotTowel 模态对话框

HotTowel modal dialog

knockout.js

single-page-application

breeze

hottowel