我有一些页面,我需要通过服务器端渲染,使他们的搜索引擎友好.对于搜索引擎,它应该作为一个经典的网站.对于用户来说,我想使界面更具互动性.我的想法是渲染页面服务器端,然后使用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的打印错误修正为数据绑定
