Question

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

搜索引擎优化 - 由于所有内容都在一个页面上并且通常是隐藏的而且没有特别可访问，因此感觉搜索引擎无法找到/优化内容
臃肿的模特 - 额外的布尔感觉更多＆＃34;观看＆＃34;而不是＆＃34;模型＆＃34;并且由于每个内容都需要一个新属性并显示逻辑，因此它看起来并不干燥。

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

Answer 1

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

如果你想让你保持模型不被臃肿，你可以使用一个observable来确定你想要显示的模板，这也可以控制是否应该显示弹出窗口，在pseude代码中：

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有很多关于此的文章。

添加静态内容＆＃34;页面＆＃34;淘汰单页面应用程序

1 个答案: