July 9. 2013
0 Comments
- Posted in:
- Web development
Knockout is awesome, but as a Knockout beginner, it was hard for me to debug. After reading a lot about Knockout, I found a Stackoverflow thread about how to debug KO. This post about Knockout Strategies is a must read! The SO question I mentioned earlier inspired me to create my first snippet.
I prepended some HTML to display the output on the left side of the screen. Here is the code:
<div style="position: absolute; top:0px; left:0px; height: 100%; width: 400px; overflow: auto; background-color: rgba(255,255,255,0.8);color: black; background-image: url(http://knockoutjs.com/img/ko-logo.png); background-repeat:no-repeat; background-position: top center; padding-top:125px;"> <pre data-bind="text: ko.toJSON($data, null, 2)"></pre> </div>
And here is the snippet code:
<?xml version="1.0" encoding="utf-8"?> <CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <CodeSnippet Format="1.0.0"> <Header> <Title> Knockout Debug </Title> <Author>JP Hellemons</Author> <Shortcut>Kodbg</Shortcut> </Header> <Snippet> <Code Language="html"> <![CDATA[ <div style="position: absolute; top:0px; left:0px; height: 100%; width: 400px; overflow: auto; background-color: rgba(255,255,255,0.8);color: black; background-image: url(http://knockoutjs.com/img/ko-logo.png); background-repeat:no-repeat; background-position: top center; padding-top:125px;"> <pre data-bind="text: ko.toJSON($$data, null, 2)"></pre> </div> ]]> </Code> </Snippet> </CodeSnippet> </CodeSnippets>
The dollar sign needs to be escaped. You can download the snippet and open the ‘Code Snippet Manager’ in Visual Studio with CTRL+K, CTRL+B and import the snippet file.
The shortcut is Kodbg (and then tab)
Good luck!