混合淘汰赛和服务器端渲染答案

【问题标题】：Mixed Knockout and Server side rendering混合淘汰赛和服务器端渲染
【发布时间】：2012-09-18 15:26:48
【问题描述】：

我有一些页面需要通过服务器端呈现，以使它们对搜索引擎友好。对于搜索引擎来说，它应该是一个经典的网站。对于用户，我想让界面更具交互性。我的想法是渲染页面服务器端，然后使用knockout和jquery通过ajax再次获取数据并将其绑定到页面。

我担心没有内容或重复内容的闪烁。对于这种情况，是否有最佳实践/模式？

过程如下所示：

使用服务器端呈现页面，包括一长串 html 元素。
使用 jQuery 获取已呈现到页面的相同数据。
使用 jquery 清除服务器端内容。
将 ajax 绑定到敲除模板，这样可以有效地呈现页面，就像以前一样。
普通用户随后点击翻阅数据时使用 ajax 和敲除来呈现数据。
搜索引擎可以按照标准链接查看与用户相同的数据。

我最关心的部分是如何使用 knockout/jquery 进行预渲染、清除和重新渲染。

也许我的思考过程有点不对劲，我很想听听反馈。

【问题讨论】：

这是有风险的。如果您开始将您的网页设置为特定于搜索引擎，Google（和其他人）会在他们发现时降级您。
@deltree 从 SEO 的角度来看，我认为我没有做错任何事情。我只是让搜索引擎可以使用相同的 ajaxed 内容。如果您关闭了 javascript，这也是相同的内容。
@danludwig 这行不通，因为引擎不会索引内容，只会索引 url。 url 的内容对蜘蛛来说是空白的。

标签： knockout.js

【解决方案1】：

它是可行的，基本上是从服务器端填充您的数据，但是将“数据绑定”属性添加到您的输入中，从淘汰部分，通过获取字段值来设置您的 observables。

这是一个简单表单的示例：

MVC部分：

public ActionResult Index()
{
    Person newPerson = new Person()
    {
        FirstName = "John",
        LastName = "Smith"
    };

    return View(newPerson);
}

还有你的观点：

<div id="main">
    <div>
        First Name:
        @Html.TextBoxFor(p => p.FirstName, new { data-bind = "value: firstName" })
    </div>
    <div>
        Last Name:
        @Html.TextBoxFor(p => p.LastName, new { data-bind = "value: lastName"})
    </div>

    <input type="button" data-bind="click: showValues" value="Show" />
</div>

最后是你的淘汰赛部分：

var personViewModel = function () {

    var self = this;

    self.firstName = ko.observable($("#FirstName").val());
    self.lastName = ko.observable($("#LastName").val());

    self.showValues = function () {
        alert(self.firstName() + " " + self.lastName());
    }
};

ko.applyBindings(new personViewModel());

希望对您的情况有用。

编辑：修复 data_bind 到 data-bind 的拼写错误

【讨论】：

【解决方案2】：

您可以尝试淘汰预渲染绑定处理程序。它基本上符合 Tamim 的建议，但它处理 foreach 并适用于任何数据绑定。

https://www.npmjs.com/package/knockout-pre-rendered

您还可以考虑使用“通用”的 React - 您可以使用相同的代码在服务器和客户端呈现页面。由于 React 使用差异引擎，因此当服务器呈现的内容被客户端呈现的内容替换时不会闪烁。

http://facebook.github.io/react/

http://reactjs.net/

【讨论】：

【解决方案3】：

您可以使用 Node 和一个简单的 DOM 实现（如 domino）呈现淘汰赛：