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

前端之家收集整理的这篇文章主要介绍了knockout.js – 混合Knockout和服务器端渲染前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_1@我有一些页面,我需要通过服务器端渲染,使他们的搜索引擎友好.对于搜索引擎,它应该作为一个经典的网站.对于用户来说,我想使界面更具互动性.我的想法是渲染页面服务器端,然后使用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>

最后你的淘汰赛部分:

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

希望为您的案件工作.

编辑:将dat_bind的打印错误修正为数据绑定

猜你在找的JavaScript相关文章