knockout.js - 混合 knockout 和服务器端渲染

Question

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

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

该过程如下所示:

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

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

使用 jquery 清除服务器端内容。

将 ajax 绑定(bind)到 knockout 模板，它可以有效地呈现页面，就像以前一样。

普通用户对数据的后续点击使用 ajax 和 knockout 来呈现数据。

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

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

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

Answer 1

它是可行的，基本上是从服务器端填充您的数据，但是将“数据绑定(bind)”属性添加到您的输入中，从 knockout 部分，通过获取字段值来设置您的 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>

最后是你的 knockout 部分:

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