knockout.js - Mixed Knockout and Server side rendering

Question

I have some pages that I need to render via the server side to make them search engine friendly. For search engines, it should function as a classic website. For users, I want to make the interface more interactive. My thought is to render the page server side, then use knockout and jquery to fetch the data again via ajax and bind it to the page.

I'm concerned about having flashes of no content, or duplicated content. Is there a best practice/pattern for cases like this?

The process would look like this:

Render page using server side, including a long list of html elements.
Use jQuery to fetch the same data already rendered to the page.
Clear server side content with jquery.
Bind ajax to knockout template, which effectively renders the page as it was previously.
Subsequent clicks to page through data by a normal user uses ajax and knockout to render the data.
Search engine can follow standard links to see the same data as the user.

The part I'm hung up on is how to pre-render, clear, and re-render with knockout/jquery.

Maybe my thought process is off a bit, I'd love to hear feedback.

score 8 · Accepted Answer

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

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

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 的错字