将静态内容“页面”添加到 Knockout 单页应用程序答案

【问题标题】：Adding static content "pages" to Knockout single page app将静态内容“页面”添加到 Knockout 单页应用程序
【发布时间】：2014-07-04 01:25:36
【问题描述】：

我构建了一个路线规划单页应用程序，该应用程序在很大程度上依赖于输入显示在 Google 地图上的详细信息。整个事情最初只用 Javascript 编写，但现在有一个 ASP.NET MVC 服务器端来方便保存、登录等。但是，我正在努力寻找一种有效的方式来显示帮助和条款和条件等静态内容。现在，我在主 HTML 中拥有所有这些内容，并在布尔值上使用模型绑定来显示/隐藏弹出窗口中的内容。我觉得这有几个问题：

SEO - 由于所有内容都在一个页面上并且通常是隐藏的且无法特别访问，因此感觉就像搜索引擎无法找到/优化内容
臃肿的模型 - 额外的布尔值感觉更像是“视图”而不是“模型”，而且由于每个内容都需要一个新属性并显示逻辑，因此它看起来并不枯燥。

有哪些模式和框架可以帮助缓解这些问题？任何也有助于通过 JSON 与服务器通信的解决方案都是首选。

【问题讨论】：

标签： asp.net-mvc knockout.js single-page-application

【解决方案1】：

在我看来，这些用于控制显示内容的额外布尔值非常好，它们既不是view 也不是model，它们是View Model。毕竟，knockoutjs 遵循MVVM 模式。

如果你想让你的视图模型不臃肿，你可以使用一个 observable 来确定你想要显示的模板，这在某种程度上也可以控制是否应该显示弹出窗口，在伪代码中：

html:

<script type="text/html" id="terms"> ... </script>

<script type="text/html" id="conditions"> ... </script>

<script type="text/html" id="help"> ... 
    <button data-bind="click: show(undefined)"> close </button>
</script>

<button data-bind="click: show('help')"> Help </button
<div id="popup" data-bind="if: showActive">
<!-- ko template: showActive -->
<!-- /ko -->
</div>

javascript:

var viewModel = function(){
    var self = this;
    self.showActive = ko.observable();

    self.show = function(showWhat){
        self.showActive(showWhat);
    }
}
ko.applyBinding(new viewModel()) ;

关于 SEO 部分，google 有很多关于这方面的文章。

【讨论】：