mvc4 と entityframework をノックアウトと組み合わせて使用します。ノックアウト マッピングも使用します。しかし、私は解決できない問題に遭遇します。
私が達成したいこと:
- ユーザーが削除ボタンをクリックして、テーブルから行を削除します。【作品】
- mvc コントローラーで削除アクション メソッドを呼び出して、データベースからデータを実際に削除します。【作品】
- 新しく変更されたテーブルのデータを含む新しい Json オブジェクトを送り返します。【作品】
ko.mapping.fromJS() and ko.applyBindings()
ノックアウトビューモデルに新しいデータをロードし、 [動作しません。ここで本当に迷っています]を使用して UI を更新します。
テーブルのデータバインドと foreach に使用するエクスペリエンスのリストへの参照を完全に失ったようです。これは、foreach ループ内から delete メソッドを呼び出す方法に関係していると思います。
また、var を使用した JavaScript の「トリック」はself = this;
、正しいデータへの参照を取得するために機能しないようです。
以下は、状況をよりよく理解するために、今のところ使用している私のコードです。さらに情報が必要な場合は、お知らせください。
これらは私のmvcビューモデルです:
public class ExperienceOverviewModel
{
public ExperienceModel selectedExperience { get; set; }
public List<ExperienceModel> Experiences { get; set; }
}
public class ExperienceModel
{
public int ExperienceId { get; set; }
public DateTime DateFrom { get; set; }
public DateTime DateUntil { get; set; }
public string Description { get; set; }
public string Employer { get; set; }
public decimal Hours { get; set; }
public int PersonId { get; set; }
public bool? Secondment { get; set; }
public string Title { get; set; }
}
これは、ノックアウトを使用して経験を foreach データバインドする私のテーブルです。
</table>
<thead>
</thead>
<tbody data-bind="foreach: Experiences()">
<tr>
<td data-bind="text: Employer"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: DateFrom"></td>
<td data-bind="text: DateUntil"></td>
<td data-bind="text: Secondment"></td>
<td>
<a href="#" data-bind="click: function(data, event){ $root.EditExperienceModal(data); }"><i class="icon-edit"></i></a>
</td>
<td>
<a href="#" data-bind="click: function(data, event){ $root.ConfirmDeleteExperienceModal(data);}"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
ko.mapping.fromJS() と ko.applyBindings() を呼び出したい私のノックアウト ビューモデル...ここでは fubar....
function ViewModel() {
this.DeleteExperience = function (experience) {
$.ajax({
type: "post",
contentType: "application/json",
url: "/Experienced/Delete/" + this.selectedExperience.ExperienceId(),
data: ko.toJSON(self.selectedExperience),
error: function (xhr, status, error) {
},
success: function (response) {
ko.mapping.fromJS(response, ?? this.Experiences ??); <---- ???
ko.applyBindings(?????); <---- ???
}
});
}
}
$(function () {
var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()))';
var mvcModel = ko.mapping.fromJSON(jsonModel);
var myViewModel = new ViewModel();
g = ko.mapping.fromJS(myViewModel, mvcModel);
ko.applyBindings(g);
});
* -- 更新 -- *
詳細を明確にするために、ここで簡単に説明します。AJAX 呼び出しから結果を取得すると、次のエラーが表示されます。
オブジェクト # にはメソッド 'Experiences' がありません
<table class="table table-striped">
<tbody data-bind="foreach: Experiences()">
<tr>
<td data-bind="text: Employer"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: DateFrom"></td>
<td data-bind="text: DateUntill"></td>
<td data-bind="text: Secondment"></td>
<td>
<a href="#" data-bind="click: $root.DeleteExperience"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function ViewModel() {
var self = this;
self.DeleteExperience = function (experience) {
$.ajax({
type: "post",
contentType: "application/json",
url: "/Experienced/Delete/" + experience.ExperienceId(),
data: ko.toJSON(experience),
error: function (xhr, status, error) {
console.log(error);
},
success: function (response) {
$('#confirmDeleteModal').modal('hide');
self.UpdateExperienceList(response);
}
});
}
self.UpdateExperienceList = function (data) {
self.Experiences(data); <---- ?????
}
}
$(function () {
var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()))';
var mvcModel = ko.mapping.fromJSON(jsonModel);
var myViewModel = new ViewModel();
g = ko.mapping.fromJS(myViewModel, mvcModel);
ko.applyBindings(g);
});
</script>