Warning: Trying to access array offset on value of type null in /home/jwblogger/jwBlogger/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16
Warning: Trying to access array offset on value of type null in /home/jwblogger/jwBlogger/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17
I love KnockoutJS! It may dirty up my HTML, but I can make things fast!
In a recent project, I was working with a listing of people, and clicking on one person displayed the details of that person to the right of the listing so that the user could edit the details of the selected person. Within the form, the client wanted to show thetext fields as clickable text – clicking the text would toggle the text into an input field. Blurring the input field would toggle the element back to text.
The page already had KnockoutJS and Bootstrap available, so I decided to leverage those tools. I ended up writing a custom component to solve the problem. Here is the codepen showing my solution.
See the Pen Edit-Inline with Knockout by Jeff Wilkerson (@stljeff1) on CodePen.0
Included in this example is a custom binding that saves the value ONLY IF the user hits the ‘Enter’ key. This binding is not mine; it was inspired by a StackOverflow post (maybe this one?) or maybe by Ryan Niemeyer .