混合的淘汰赛和服务器端渲染 [英] Mixed Knockout and Server side rendering

问题描述

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

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?

该过程将如下所示:

1. 使用服务器端渲染页面，其中包括一长串html元素.
2. 使用jQuery提取已呈现到页面的相同数据.
3. 使用jquery清除服务器端内容.
4. 将ajax绑定到基因剔除模板，该模板可以有效地呈现页面.
5. 普通用户随后点击页面翻阅数据时，会使用ajax和剔除法来呈现数据.
6. 搜索引擎可以通过标准链接来查看与用户相同的数据.

我困扰的部分是如何使用剔除/jquery进行预渲染，清除和重新渲染.

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.

推荐答案

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

Its doable, basically populate your data from server side, but add the "data-bind" attributes to your inputs, from knockout part, set your observables by fetching the field values.

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

here is a sample for a simple form:

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

Fixing typo of data_bind to data-bind

这篇关于混合的淘汰赛和服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！