Knockout JS custom Table editor

Question

I have a table with 3 columns. Last column has a button which says edit. On click of the button, 2 cells on the left will get a text box with text being the cell contents, the button turns in to a update button. I make changes to the text and click on update button. Text from text boxes will be assigned to table cells and the button changes to edit button.

It is very simple to get it working with jQuery. But I want to bind the text to a knockout js object. I pre-populate the table with some data, I will edit the text using the edit button. But how do I update the knockout js object?

I checked the documentation and other samples online but I did not find anything similar. All grid examples have a text box. In my case I want to change the HTML tags also..

Can you give me an approach to tackle this?

Answer 1

Take a look at this post: http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html and this jsFiddle: http://jsfiddle.net/rniemeyer/X9rRa/

It shows creating two templates for each row with one read-only and one for editing. The template being used is dynamically bound. The post also shows how you can have the ability to accept/cancel updates to the item.