Below is an example of some code:
<table>
<tr data-bind='template: { name: "GridColumnTable", foreach: columns }' ></tr>
</table>
<script type="text/html" id="GridColumnTable">
<td>
<span data-bind="text:name, click:function(event){ alert('blabla') }">
none
</span>
</td>
</script>
Here is the included Javascript code:
var viewModel = {
columns: new ko.observableArray(),
changeColumnName: function(column)
{
column.name('asdas');
}
}
viewModel.columns.push({
name: new ko.observable('column1')
});
viewModel.columns.push({
name: new ko.observable('column2')
});
viewModel.columns.push({
name: new ko.observable('column3')
});
viewModel.columns.push({
name: new ko.observable('column4')
});
ko.applyBindings(viewModel);
For a live demo, check out this JSFiddle link.
I'm looking to update the column name when it's clicked on. However, I am unsure how to pass the current element to my changeColumnName function. Any suggestions?