Knock Out data binding - html

Question

I have a question about data binding using knockout.
Here's the problem: I have a table, I what I would like to do is that when a row in table is clicked, I want the values of the row to appear in the input fileds which are located above the table.
so here'
<tbody data-bind="foreach: customers">
<tr data-bind="click: doSomething">
<td data-bind="text: date"></td>
<td data-bind="text:staff"></td>
<td data-bind="text: ftype"></td>
<td data-bind="text: value"></td>
<td data-bind="text: message"></td>
</td>
</tr>
</tbody>
In my viewmodel, I have the following function:
doSomething: function(data) {
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
Here's the error I am getting:
["Unable to parse bindings.↵Message: ReferenceError:… is not defined;↵Bindings value: click: doSomething", "views/myView/index", Object]
0: "Unable to parse bindings.↵Message: ReferenceError: doSomething is not defined;↵Bindings value: click: doSomething"
1: "views/myView/index"
2: Object
length: 3
__proto__: Array[0]
Let me know if I need to provide any more details. I will appreciate your help fplks!

Answer 1

A very basic pattern for this type of thing is to have an array of items and a selectedItem observable that you populate when selecting a row.
Then, you can use the with binding around a section to create your editor.
<table>
<tbody data-bind="foreach: customers">
<tr data-bind="click: $root.selectedCustomer">
<td data-bind="text: name"></td>
</tr>
</tbody>
</table>
<hr/>
<div data-bind="with: selectedCustomer">
<input data-bind="value: name" />
</div>
Sample: http://jsfiddle.net/rniemeyer/Z6VPV/

Answer 2

You need to bind your model to the view
var currentViewModel = function(){
this.doSomething = function(data){
var self = this;
self.date(data.date);
self.staff(data.staff);
self.ftype(data.ftype);
self.value(data.value);
self.message(data.message);
}
var viewModel = new currentViewModel();
ko.applyBindings(viewModel);