Within my template in tbody below, how can I access the index of the item being rendered?
<table>
<tbody data-bind="foreach:contacts">
<tr class="contactRow" valign="top">
<td><a href="#" data-bind="click: function(){viewModel.removeContact($data)}">Delete</td>
<td><input data-bind="value: FirstName" name="Contacts[].FirstName"/></td>
<td><input data-bind="value: LastName" name= "Contacts[].LastName" /></td>
<td><input data-bind="value: Username" name="Contacts[].Username"/></td>
<td><input data-bind="value: Email" name="Contacts[].Email"/></td>
</tr>
</tbody>
<thead>
<tr>
<th>Controls</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Email</th>
</tr>
</thead>
</table>
This is the raw view model value in the current context. Usually this will be the same as $data , but if the view model provided to Knockout is wrapped in an observable, $data will be the unwrapped view model, and $rawData will be the observable itself.
KO is able to create a two-way binding if you use value to link a form element to an Observable property, so that the changes between them are exchanged among them. If you refer a simple property on ViewModel, KO will set the form element's initial state to property value.
To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.
Create an HTML file and include knockout. js via a <script> tag. Add a second <script> tag under the knockout script. In this script tag, we'll initialize a view model and apply data binds to our Document.
Update: $index
is now available in KO 2.1.
Currently, there is not a way to directly access the index in a foreach
. There is a pull request that looks at adding a $index
variable here: https://github.com/SteveSanderson/knockout/pull/182
An option that I have used in the past is to use a manual subscription against an observableArray that keeps an index observable in sync.
It works like:
//attach index to items whenever array changes
viewModel.tasks.subscribe(function() {
var tasks = this.tasks();
for (var i = 0, j = tasks.length; i < j; i++) {
var task = tasks[i];
if (!task.index) {
task.index = ko.observable(i);
} else {
task.index(i);
}
}
}, viewModel);
Here is a sample: http://jsfiddle.net/rniemeyer/CXBFN/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With