I went looking for a knockout inline edit binding, but the only ones I found had external dependencies other than jQuery, or used more than just a binding.
So I figured I would share the simple one I came up with (other answer's of course welcome, especially those that only use knockout).
Just as an alternative: the code that I have used for inline editing looks like:
http://jsfiddle.net/rniemeyer/Rg8DM/
Even though the answer is already accepted I believe I found a better solution so I would like to share it.
I ended up using what was in the documentation here http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html#example-supplying-additional-values-to-descendant-bindings
and came up with this rough draft of the binding:
the model I used in the code is
in your html you would use it like
Note: I am using Bootstrap so that is where the icons in the binding html are from.
Here is my inline edit binding (fiddle), it relies on jQuery for some DOM manipulation though.
HTML:
JS:
The width is set in the click function because of the unreliability of the width on Dom Ready: it was coming out as 0 half the time.
I also made one for toggles (boolean) that you just click to switch:
Apply like so (second param is optional):
The fiddle also contains one for
select
andmulti-select
, but right now the multi-select causes the display to jump. I'll need to fix that.