2

アプリ全体で、Reading に関連するすべての機能に Razor を使用し、CUD 操作には knockoutJS と AJAX を活用したいと考えています。

プロフィール ビューで、次のことを行いました。

<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 モデルにバインドする方法 (4 行目) です。

対応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());
})

また、このアプローチの「妥当性」に関するフィードバックも歓迎します。

4

1 に答える 1

3

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 が (ほぼ即座に) 開始されると、新しいデータを含む完全なモデル バインディングがまだ得られます。

于 2013-09-16T23:40:30.313 に答える