Я хотел бы отобразить редактируемый список элементов, каждый элемент которого доступен для редактирования (вроде как редактируемая сетка, в некотором роде). Я использую KnockoutJS. Я не могу использовать просто простой наблюдаемый массив, потому что в документации говорится: "Наблюдаемые массивы отслеживают, какие объекты находятся в массиве, а не состояние этих объектов"
Итак, я создал наблюдаемый массив наблюдаемых объектов (с использованием utils.arrayMap) и привязал их к представлению. Однако проблема заключается в том, что если я редактирую данные на экране, любые изменения данных, которые пользователь делает на экране, не вступают в силу. См. http://jsfiddle.net/AndyThomas/E7xPM/
Что я делаю неправильно?
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js" type="text/javascript"></script>
<table>
<tbody data-bind="template: { name:'productListJavascriptTemplate', foreach: products}">
</tbody>
</table>
<script type="text/html" id="productListJavascriptTemplate">
<tr>
<td>Name: <input data-bind="value: Name"/></td>
<td>Name: <span data-bind="text: Name"/></td>
<td><select data-bind="options: this.viewModel.categories,
optionsText: 'Name', optionsValue: 'Id', value: CategoryId,
optionsCaption: 'Please select...'"></select></td>
<td>CategoryId: <input data-bind="value: CategoryId"/></td>
</tr>
</script>
var categoryList= [
{
Name: "Electronics",
Id: "1"},
{
Name: "Groceries",
Id: "2"}
];
var initialData= [
{
Name: "Television",
CategoryId: "1"},
{
Name: "Melon",
CategoryId: "2"}
];
var viewModel = {
products: ko.observableArray(
ko.utils.arrayMap(initialData, function(product) {
return ko.observable(product);
})),
categories: ko.observableArray(categoryList)
};
$(function() {
ko.applyBindings(viewModel);
});