wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. This notice was triggered by the codepen-embed-script handle. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/jwblogger/jwBlogger/wp-includes/functions.php on line 6114I love KnockoutJS! It may dirty up my HTML, but I can make things fast!<\/p>\n
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. \nSee the Pen Edit-Inline with Knockout by Jeff Wilkerson (@stljeff1) on CodePen.<\/p>\n\n 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<\/a>?) or maybe by Ryan Niemeyer<\/a> .<\/p>\n Check out the full code on GitHub<\/a>, or see the codepen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[13,16],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-development","tag-javascript","tag-knockoutjs"],"_links":{"self":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":0,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\nThe page already had KnockoutJS and Bootstrap available, so I decided to leverage those tools. I ended up writing a custom component<\/a> to solve the problem. Here is the codepen <\/a>showing my solution.<\/p>\n