1
이 블로그에 따라 inplace 표 편집을 만듭니다. 다른InPlace Grid Edit, 취소가 실패합니다.
http://blog.ryanvanderpol.com/knockout-edit-data-grid/
모든 여전히 취소 버튼을 제외한 작품을 좋아 새 값으로 UI를 업데이트합니다.
어떻게 해결할 수 있습니까? Hpw 이전 값을 가져오고 사용자가 취소를 클릭하면 원래 값으로 필드를 업데이트합니까?
감사합니다.
My Object structure is :
class Tour
{
tourSeriesName: string;
year: string;
tourSeriesDepartures: Array<{
departureGroupName: string;
departures: Array<{
tourName: string;
departureCode: string;
isActive: boolean;
tourId: number;
tourDepartureId: number;
assignedCoaches: Array<{
coachName: string;
seats: number;
seatsAvailable: number;
isExtensionCoach: boolean;
resourceInventoryId: number;
resourceScheduleId: number
}>;
}>;
}>;
So something like this:
<div id="departure-container" style="display: none;" data-bind="visible: TourSeriesDepartures().length>0">
<table class="table" >
<tr>
<th>Series Departure</th>
<th>Main Coach Seats</th>
<th>Departure</th>
</tr>
<tbody data-bind=" template:{name:templateToUse, foreach: currentPage }"></tbody>
</table>
</div>
</body>
<script id="itemsTmpl" type="text/html">
<!-- ko foreach: Departures -->
<tr>
<!-- ko if: $index() == 0 -->
<td style="vertical-align:middle" data-bind="text: $parent.DepartureGroupName,attr: { rowspan: $parent.Departures().length }"></td>
<td style="vertical-align:middle" data-bind="attr: { rowspan: $parent.Departures().length }">
<!-- ko if: $data.AssignedCoaches().length > 0 -->
<span data-bind="text: (($data.AssignedCoaches()[0].Seats) ? $data.AssignedCoaches()[0].Seats : '?')" ></span>
<!-- /ko -->
</td>
<!-- /ko -->
<td>
<span data-bind="text: TourName "></span>
<span data-bind="text: DepartureCode"></span>
</td>
<!-- ko if: $index() == 0 -->
<td class="buttons" data-bind="attr: { rowspan: $parent.Departures().length }" style="vertical-align:middle">
<span>
<button class="btn" data-bind="click: $root.edit" title="edit"> Edit </button>
</span>
</td>
<!-- /ko -->
</tr>
<!-- /ko -->
</script>
<script id="editTmpl" type="text/html">
<!-- ko foreach: Departures -->
<tr > @*data-bind="click: $root.selectItem"*@
<!-- ko if: $index() == 0 -->
<td style="vertical-align:middle" data-bind="text: $parent.DepartureGroupName,attr: { rowspan: $parent.Departures().length }"></td>
<td style="vertical-align:middle" data-bind="attr: { rowspan: $parent.Departures().length }">
<!-- ko if: $data.AssignedCoaches().length > 0 -->
<span><input data-bind="value: (($data.AssignedCoaches()[0].Seats) ? $data.AssignedCoaches()[0].Seats : '?'), event: { blur: $root.here}" required /></span>
<!-- /ko -->
</td>
<!-- /ko -->
<td>
<span data-bind="text: TourName "></span>
<span data-bind="text: DepartureCode"></span>
</td>
<!-- ko if: $index() == 0 -->
<td class="buttons" data-bind="attr: { rowspan: $parent.Departures().length }" style="vertical-align:middle">
<span>
<button class="btn" data-bind="click: $root.save" title="save"> Save </button>
<button class="btn" data-bind="click: $root.cancel" title="cancel">Cancel</button>
</span>
</td>
<!-- /ko -->
</tr>
<!-- /ko -->
</script>
var viewModel = function (data) {
if (data != null) {
ko.mapping.fromJS(data, {}, self);
}
var self = this;
self.TourSeriesDepartures = ko.observableArray([]);
self.selectedItem = ko.observable("");
self.saveMe = function (d) {
var resourceScheduleId = d.AssignedCoaches()[0].ResourceScheduleId();
var seats = d.AssignedCoaches()[0].Seats();
//alert("in save" + this);
//viewModel.selectedItem(this);
$.ajax({
//url: "SaveTour",
url: "SaveTour/?seats=" + seats + "&rsID=" + resourceScheduleId,
data: ko.toJSON({ tour: ko.toJS(self.selectedItem) }),
type: "post",
contentType: "application/json",
success: function (result)
{ alert(result) }
});
}
// trying in place editing
self.selectedItemCache = ko.observable();
self.templateToUse = function (item) {
return self.selectedItem() === item.Departures()[0] ? 'editTmpl' : 'itemsTmpl';
};
self.edit = function (item) {
self.selectedItem(item);
self.selectedItemCache(ko.mapping.toJS(item));
};
self.cancel = function() {
if (self.selectedItemCache) {
var item = self.selectedItem();
//var index = self.list.indexOf(item);
//self.list.splice(index, 1, self.selectedBackup);
}
self.selectedItem(null);
};
self.save = function() {
var item = self.selectedItem();
var resourceScheduleId = item.AssignedCoaches()[0].ResourceScheduleId();
var seats = item.AssignedCoaches()[0].Seats();
//alert("in save" + this);
//viewModel.selectedItem(this);
$.ajax({
//url: "SaveTour",
url: "SaveTour/?seats=" + seats + "&rsID=" + resourceScheduleId,
data: ko.toJSON({ tour: ko.toJS(self.selectedItem) }),
type: "post",
contentType: "application/json",
success: function (result)
{
alert(result);
self.selectedItem(null);
}
});
}
self.selectItem = function() {
//self.selectedItem(this);
}
self.getDataFromServer = function (t) {
var tour = $("#tourCode").val();
var year = $("#year").val();
$.ajax({
url: "Search/?tour=" + tour + "&year=" + year ,
type: 'GET',
dataType: 'json',
success: function (result) {
ko.mapping.fromJS(result, {}, self);
self.page(0);
}
});
}
//Paging
self.page = ko.observable(0);
self.noOfPages = ko.observable(0);
self.nextPage = function() {
if (self.page() < (self.noOfPages()-1)) {
self.page(self.page() + 1);
self.GetClass(self.page());
}
};
self.prevPage = function() {
if (self.page() >= 1) {
self.page(self.page() - 1);
}
};
self.currentPage = ko.computed(function() {
return self.TourSeriesDepartures().slice(self.page() * 10, (self.page() * 10) + 10);
});
self.noOfPages = ko.computed(function() {
return Math.ceil(self.TourSeriesDepartures().length/10);
});
// returns a list of numbers for all pages
self.PageList = ko.computed(function() {
if (self.noOfPages() > 1) {
return Array.apply(null, { length: self.noOfPages() }).map(Number.call, Number);
}
});
self.goToPage = function (page) {
self.page(page);
};
// determines if page # is active returns active class
self.GetClass = function (page) {
return (page == self.page()) ? "active" : "";
}
}
$(document).ready(function() {
vm = new viewModel();
ko.applyBindings(vm);
});
그래서 내 UI가 중첩 된 컬렉션 (즉, 2 레벨 깊이의) 자식 요소에 바인딩 :
는 다음 작업 바이올린입니다. 여기서 "항목"에 이어지는 가장 좋은 방법은 무엇입니까? 예 : 레벨 1, 레벨 2, 레벨 3 및 내 경우의 항목은 레벨 3의 행입니다. – user8808262
@ user8808262 편집 기능은 어떻게 작동합니까? 편집중인 모델에 대한 참조가 있습니까? –
예 레벨 2 (레벨 3의 배열 포함)에 대한 참조가 있으며 레벨 3의 값을 업데이트/취소해야합니다. – user8808262