混合 MVC Razor 和 Knockout

Question

在我的整个应用程序中，我希望将 Razor 用于与阅读相关的所有功能，并利用 knockoutJS 和 AJAX 进行 CUD 操作。

在我的个人资料视图中，我执行了以下操作：

<div>
    <h4>About Me</h4>
    <!-- ko if: !isEditingAboutMe() -->
    <p>@Model.User.AboutMe</p>
    @if (Model.CurrentUserCanEdit)
    {
        <a data-bind="click: editAboutMe">edit</a>
    }
    <!-- /ko -->
    <!-- ko if: isEditingAboutMe() -->
    @Html.TextBoxFor(model => model.User.AboutMe, new { data_bind = "value: aboutMe" })
    <a data-bind="click: saveAboutMe">save</a>
    <a data-bind="click: cancelAboutMe">cancel</a>
    <!-- /ko -->
</div>

这样搜索引擎至少可以抓取内容，启用了 javascript 的用户可以执行 CUD 操作。

我上面的问题是 - 使用 AJAX，如果我点击“保存”，我如何将新值绑定到 Razor 模型（第四行向下）？

对应的JS：

function ProfileVm() {
    var self = this;

    self.aboutMe = ko.observable();

    self.saveAboutMe = function() {
        // AJAX call, after success close the field
        self.isEditingAboutMe(false);
    };

    self.cancelAboutMe = function() {
        // just for testing, would revert the value in practice
        self.isEditingAboutMe(false);
    };

    self.isEditingAboutMe = ko.observable(false);
    self.editAboutMe = function() {
        self.isEditingAboutMe(true);
    };

}

$(document).ready(function () {
    ko.applyBindings(new ProfileVm());
})

另外 - 欢迎就这种方法的“适当性”提供反馈。

Answer 1

目前尚不清楚为什么您将 Knockout 仅用于写入操作 (CUD) 而不是用于读取。这样做可以自动解决您的问题：

代替：

<p>@Model.User.AboutMe</p>

您应该遵循 Knockout 方式，因此您将拥有双向模型绑定：

<p data-bind="text: aboutMe()"></p>

现在，一旦 aboutMe 字段更新，Knockout 将确保 <p> 元素中的数据也将更新。

编辑：

由于您希望用户详细信息的搜索引擎可见性，您可以试试这个：

<p data-bind="text: aboutMe()">@Model.User.AboutMe</p>

这样，服务器响应的简单检索（没有脚本调用）确实会包含所需的文本，但是一旦 Knockout 启动（几乎立即），您仍然可以使用新数据进行完整的模型绑定。