混合剔除和服务器端呈现

Question

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

我担心的是没有内容的闪光灯，或者重复的内容。这种情况是否有最佳的做法/模式？

这个过程如下所示：

1. 使用服务器端呈现页面，包括一长串html元素。
2. 使用jQuery获取已呈现到页面的相同数据。
3. 使用jquery清除服务器端的内容。
4. 将ajax绑定到敲除模板，从而有效地呈现以前的页面。
5. 随后，普通用户单击页面浏览数据，然后使用ajax和剔除来呈现数据。
6. 搜索引擎可以按照标准链接查看与用户相同的数据。

我挂起的部分是如何使用剔除/jquery进行预渲染、清除和重新渲染。

也许我的思维过程有点偏离了，我很想听听反馈。

Answer 1

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

下面是一个简单表单的示例：

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的错误修改为数据绑定

Answer 2

您可以尝试敲除预呈现的绑定处理程序。它基本上是按照Tamim的建议做的，但是它处理了foreach，并且适用于任何数据绑定。

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

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

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

http://reactjs.net/

Answer 3

您可以使用Node和一个简单的DOM实现(如domino)呈现淘汰制：

• Gist - https://gist.github.com/kaheglar/10afd535e4970ad9ec6accd62b6ceb03.
• Runable示例- https://runkit.com/kaheglar/58d4df9993b2030014579f47.