Knockout.js 混合淘汰和服务器端渲染

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

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

过程如下所示：

使用服务器端呈现页面，包括一长串html元素

使用jQuery获取已呈现到页面的相同数据

使用jquery清除服务器端内容

将ajax绑定到敲除模板，这样可以有效地呈现与以前相同的页面

普通用户随后单击页面浏览数据时，使用ajax和knockout呈现数据

搜索引擎可以按照标准链接查看与用户相同的数据

我挂断的部分是如何使用knockout/jquery预渲染、清除和重新渲染

---

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

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

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

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>

希望这对你的案子有用

---

编辑：修复数据绑定到数据绑定的打字错误也可以使用绑定。对于tempate和foreach绑定，它不会重新生成HTML，而是使用服务器端生成的HTML。您需要做的唯一一件事是在服务器中用几个属性来注释HTML，这些属性指定数据的键。

除了使用敲除外，还使用了其他属性，但我遇到了同样的问题，这就是我提出的解决方案：

---

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

<>你也可以考虑使用“通用”的反应——你可以用相同的代码在服务器上和客户端上渲染页面。由于React使用差异引擎，因此当服务器呈现的内容替换为客户端呈现的内容时，不会出现闪烁

---

您可以使用Node和简单的DOM实现（如domino）渲染敲除：

• 要点-
• 可运行示例-

---

这很危险。如果你开始让你的页面特定于搜索引擎，谷歌（和其他人）会在他们发现的时候降低你的等级。@deltree从SEO的角度来看，我不认为我做错了什么。我只是让搜索引擎可以使用相同的ajaxed内容。如果你关闭javascript，你也会得到同样的内容。@danludwig这不起作用，因为引擎不会索引内容，只会索引url。对于爬行器，url的内容将变为空白。

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());