I modifed the Gifts List sample to use an array of strings and $data
instead of property names but when I edit the entries the viewModel
doesn't update.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>knockout</title>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
</head>
<body>
<form action='/someServerSideHandler'>
<p>You have asked for <span data-bind='text:
gifts().length'> </span> gift(s)</p>
<table data-bind='visible: gifts().length > 0'>
<thead>
<tr>
<th>Gift name</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: gifts'>
<tr>
<td><input class='required' data-bind='value: $data,
uniqueName: true' /></td>
<td><a href='#' data-bind='click:
$root.removeGift'>Delete</a></td>
</tr>
</tbody>
</table>
<button data-bind='click: addGift'>Add Gift</button>
<button data-bind='enable: gifts().length > 0, click: save'
type='submit'>Submit</button>
</form>
<script type='text/javascript'>
var GiftModel = function(gifts) {
var self = this;
self.gifts = ko.observableArray(gifts);
self.addGift = function() {
self.gifts.push("test");
};
self.removeGift = function(gift) {
self.gifts.remove(gift);
};
self.save = function(form) {
alert("Transmit to server: " +
ko.utils.stringifyJson(self.gifts));
};
};
var data = ["Tall Hat", "Long Cloak"]
var viewModel = new GiftModel(data);
ko.applyBindings(viewModel);
</script>
</body>
</html>