2

私からしてみれば：

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

<script type="text/javascript">
$(document).ready(ko.applyBindings(new ProfileVm(@Html.Raw(Json.Encode(Model)))));
var userId = @Html.Raw(Json.Encode(User.Identity.Name));
</script>

私のビューモデル:

function ProfileVm(model) {
var self = this;

self.aboutMe = ko.observable(model.AboutMe);

self.saveAboutMe = function (username) {
    dataservice().updateAboutMe(username, self.aboutMe());
    self.isEditingAboutMe(false);
};

self.cancelAboutMe = function() {
    self.isEditingAboutMe(false);
};

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

「編集」をクリックすると、期待どおりに DOM が変更されますが、saveAboutMe が実行されます。「保存」をクリックした場合にのみ実行する必要があるため、クリック：バインディング。どうしたの？

4

1 に答える 1

2

かっこ「saveAboutMe(userId)」を開いたり閉じたりするときに関数を実行しています。クリックバインディングで関数「saveAboutMe」の名前を設定するだけです。

  1. 関数呼び出しから「(userId)」を削除します
  2. 関数定義で「saveAboutMe」
  3. グローバルであるため、関数で「userId」を使用できます。

必要に応じてこれを少しきれいにするためにできることは、グローバル変数を「保存」関数に渡すことです。

userId = @Html.Raw(Json.Encode(User.Identity.Name));

そして、あなたのクリックバインディングで:

<a data-bind="click: function(){saveAboutMe(userId);}">save</a>

ここで行っていたことは、ユーザーが「保存」アンカーをクリックしたときに「saveAboutMe」を呼び出す匿名関数を定義することです。これとあなたがやっていることの違いは、ここでは無名関数が定義されているだけで、実行されていないことです。

もう 1 つのクリーンな方法は、userId を ko ViewModel に追加し、関数内でそれへの参照を作成することです。

self.saveAboutMe = function (username) {
    console.log(self.userId); // this should work if you add your userId to your view model.
    dataservice().updateAboutMe(username, self.aboutMe());
    self.isEditingAboutMe(false);
};
于 2013-09-18T00:20:47.040 に答える