混合淘汰赛和服务器端渲染(Mixed Knockout and Server side render

我有一些网页，我需要通过服务器端渲染，使其搜索引擎友好。对于搜索引擎，它应该作为一个典型的网站工作。对于用户来说，我想使界面更加互动。我的想法是提供网页服务器端，然后使用基因敲除和jQuery通过AJAX再次读取该数据并将其绑定到该页面。

我很担心没有内容或重复内容的闪烁。是否有这样的情况下，最好的做法/模式？

过程是这样的：

使用服务器端，包括HTML元素的一长串渲染页面。
使用jQuery获取已经呈现页面相同的数据。
清除服务器端的内容与jQuery。
结合AJAX淘汰赛模板，从而有效地呈现为它以前的页面。
随后点击页面通过数据由普通用户使用Ajax和基因敲除渲染数据。
搜索引擎可以按照标准链接可以看到相同的数据用户。

我挂了的部分是如何预渲染，清晰，并与淘汰赛/ 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的错字到数据绑定