JSON 호출에서 채워지는 녹아웃 뷰 모델이 있습니다. 양식의 select 요소에는 viewmodel에서 오는 옵션 집합과 observableArray 부분의 값이 있습니다. 문제는 select 요소에만 있고 입력 요소에는 문제가 없습니다. 양식을 제출할 때 select에 할당 된 값만 적절한 값을 포함합니다. 따라서 JSON에서 성공적으로로드되어 양식으로 제공되었지만 변경되지 않은 옵션은 options 배열의 첫 번째 값으로 서버에 다시 전송됩니다.knockout.js select 요소 바인딩이 후속 양식 제출시 값을 잃습니다.
HTML 양식 : 문제 위의 코드에서
<form>
<table >
<thead>
...
</thead>
<tbody data-bind='foreach: ScaledCostEntries'>
<tr>
<td><input data-bind='value: StartDateString' class="startdate" type="text"/></td>
<td><select data-bind='value: InvoiceType, options: $root.InvoiceTypes'></select></td>
<td><a href='#' data-bind='click: $root.removeCost'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addCost'>Add New Row</button>
<button data-bind='click: save' >Update</button>
</form>
는 viewmodels ScaledCostEntries observableArray의 InvoiceType, 부분입니다. (또한, 만약 내가 값과 옵션의 순서를 바꾸면 select 요소에 선택된 값을 넣지 않을 것이다).
과 JS
: 그래서<script type="text/javascript">
$(function() {
var scaledCostModel = function() {
var self = this;
self.ScaledCostEntries = ko.observableArray([]);
self.InvoiceTypes = ko.observableArray([]);
self.addCost = function() {
self.ScaledCostEntries.push({
StartDateString: ko.observable(),
InvoiceType: ko.observable()
});
};
self.removeCost = function (cost) {
cost.IsDeleted = true;
self.ScaledCostEntries.destroy(cost);
};
self.save = function (form) {
jQuery.ajax({
url: '@Request.Url.PathAndQuery',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: ko.toJSON(self.ScaledCostEntries)
});
};
};
jQuery.getJSON('@Request.Url.PathAndQuery', function (data) {
ko.mapping.fromJS(data, {}, viewModel);
});
var viewModel = new scaledCostModel();
ko.applyBindings(viewModel);
});
</script>
은, 요약하기는 문제는 선택 요소에 바인드 뷰 모델의 속성입니다. 선택 항목을 변경하지 않으면 (다시 선택하지 않음) 서버에 게시 할 때 viewmodel은 옵션 (InvoiceTypes) 배열의 첫 번째 항목으로 값을 갖습니다. 결국, 나는 사소한 것을 잊어 버렸을 것이고 이것은 나의 첫번째 더 심각한 녹아웃이다. 시도.
참고 : InvoiceType은 ScaledCostEntries의 일부이며 observableArray입니다. InvoiceTypes은 observableArray입니다. InvoiceTypes과 ScaledCostEntries은 모두 JSON에서 가져온 것이므로 ScaledCostEntries이 다시 전송됩니다.
ajax 호출의 시작 부분에 크롬이나 다른 브라우저 디버거에 중단을 넣고 self.ScalsedCostEntries 배열에있는 내용을 볼 수 있습니까? – zmanc
@zmanc : 네, 해냈습니다. 값을 다시 선택하면 가치가 있습니다. 다른 행의 값을 형성하거나 다시 선택하지 않은 경우 편집되지 않은 항목에는 선택 옵션 인 InvoiceTypes [0]의 첫 번째 요소가 포함됩니다. –