@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的打印错误修正为数据绑定