我正在尝试获得一个与 Knockout 和 Sammy 一起使用的简单路由机制。虽然我可以让它与 JQuery 一起使用,但我无法让它与 Sammy 和 Knockout 一起使用。这是代码:
$(function() {
var myViewModel = {
viewDiv: ko.observable("home") };
var app = $.sammy(function() {
this.get("#/", function() { myViewModel.viewDiv = "home";});
this.get("#/div1", function() { myViewModel.viewDiv = "div1";});
this.get("#/div2", function() { myViewModel.viewDiv = "div2";});
this.get("#/div3", function() { myViewModel.viewDiv = "div3";});
});
$(function() { app.run("#/") });
ko.applyBindings(myViewModel);
});
这是标记:
<div id="main">
<ul id="link">
<li><a href="#/div1">Div1</a></li>
<li><a href="#/div2">Div2</a></li>
<li><a href="#/div3">Div3</a></li>
<li><a href="#/">Home</a></li>
</ul>
<p>viewDiv:<span data-bind="text: this.viewDiv"></span></p>
</div>
<div id="content">
<div id="home" data-bind="visible: this.viewDiv=='home'">
<h2>Home</h2>
</div>
<div id="div1" data-bind="visible: this.viewDiv=='div1'">
<h2>First Div</h2>
</div>
<div id="div2" data-bind="visible: this.viewDiv=='div2'">
<h2>Second Div</h2>
</div>
<div id="div3" data-bind="visible: this.viewDiv=='div3'">
<h2>Third Div</h2>
</div>
</div>
URL 按预期更改,但我想显示或隐藏的所有 div 都保持隐藏状态,并且显示当前 div 的单个数据绑定什么也不显示。我在 Sammy 路由中也有控制台日志语句。这些按预期记录了div。我可能缺少一些简单的东西。任何人都可以帮忙吗?提前致谢!