Knockout.js url 路由

Question

我做了我的第一个knockout.js应用程序 http://jsfiddle.net/Pqs7e/

用于显示应用程序部分（书籍部分，关于部分）我使用 jquery $("#id").show()。我觉得这不是正确的方法。我如何通过视图模型的机制来做到这一点？

Answer 1

另一种方法是使用模板：

<div data-bind="template: state">
    Template renders here
</div>

然后您的部分可以在类似这样的地方定义（在同一文件或其他地方）：

<script id="books" type="text/html">
   Your markup here...
</script>

<script id="about" type="text/html">
   Your markup here...
</script>

Answer 2

我会使用特殊的 state observable 来实现它，它可以识别要显示的 div：

function ViewModel(){
    var self = this;
    self.state = ko.observable();
    ...
}

然后你只需像这样绑定它：

<div id="books" data-bind="visible: state() === 'books'>...</div>
<div id="about" data-bind="visible: state() === 'about'>...</div>

并在这样的状态之间切换：

this.get('#books', function() {
    self.state("books");
});

this.get('#about', function() {
    self.state("about");
});