| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| |
| <html> |
| <head> |
| <title>Video of Using KnockoutJS in an HTML5 Application</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > |
| <meta name="description" content="A screencast that introduces the basics of using jQuery and KnockougJS in an HTML5 application in NetBeans IDE"> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>Video of Using KnockoutJS in an HTML5 Application</h1> |
| <p>In this video tutorial series, we look at how to build a client-side HTML5 application with |
| jQuery and KnockoutJS. |
| We'll look at binding DOM elements to a data model, defining event handlers, |
| and pulling data from JSON and REST services.</p> |
| <p>Author: John Jullion-Ceccarelli</p> |
| <table> |
| <tr> |
| <td class="valign-top"> |
| |
| |
| |
| |
| |
| |
| <h3>Download / Watch full size:</h3> |
| <ul> |
| <li><a href="http://bits.netbeans.org/media/knockout1-basic-bindings.mp4">Knockout Part 1 - Basic Bindings</a> (15 MB)</li> |
| <li><a href="http://bits.netbeans.org/media/knockout2-json.mp4">Knockout Part 2 - JSON</a> (12 MB)</li> |
| <li><a href="http://bits.netbeans.org/media/knockout3-click-handler.mp4">Knockout Part 3 - Click Handler </a> (19 MB)</li> |
| </ul> |
| |
| |
| |
| </td> |
| |
| <td width="486" class="valign-top align-center"> |
| <h2>Knockout Part 1 - Basic Bindings</h2> |
| <script src="/images_www/js/mediaplayer-5.9/jwplayer.js" type="text/javascript"></script> |
| <div id="player1" > |
| <center> |
| <div id="flashContent1"></div> |
| </center> |
| </div> |
| <script type="text/javascript"> |
| $(function(){ |
| var targetFile='http://bits.netbeans.org/media/knockout1-basic-bindings.mp4'; |
| jwplayer('flashContent1').setup({ |
| 'id': 'flashContentId', |
| 'width': '530', |
| 'height': '340', |
| 'autostart': 'true', |
| 'file': targetFile, |
| 'controlbar':{position:'bottom'}, |
| 'modes': [ |
| {type: 'html5'}, |
| {type: 'flash', src: '/images_www/js/mediaplayer-5.9/player.swf'}, |
| {type: 'download'} |
| ] |
| }); |
| }); |
| </script> |
| |
| <h2>Knockout Part 2 - JSON</h2> |
| <script src="/images_www/js/mediaplayer-5.9/jwplayer.js" type="text/javascript"></script> |
| <div id="player2" > |
| <center> |
| <div id="flashContent2"></div> |
| </center> |
| </div> |
| <script type="text/javascript"> |
| $(function(){ |
| var targetFile='http://bits.netbeans.org/media/knockout2-json.mp4'; |
| jwplayer('flashContent2').setup({ |
| 'id': 'flashContentId', |
| 'width': '530', |
| 'height': '340', |
| 'autostart': 'false', |
| 'file': targetFile, |
| 'controlbar':{position:'bottom'}, |
| 'modes': [ |
| {type: 'html5'}, |
| {type: 'flash', src: '/images_www/js/mediaplayer-5.9/player.swf'}, |
| {type: 'download'} |
| ] |
| }); |
| }); |
| </script> |
| <h2>Knockout Part 3 - Click Handler</h2> |
| <script src="/images_www/js/mediaplayer-5.9/jwplayer.js" type="text/javascript"></script> |
| <div id="player3" > |
| <center> |
| <div id="flashContent3"></div> |
| </center> |
| </div> |
| <script type="text/javascript"> |
| $(function(){ |
| var targetFile='http://bits.netbeans.org/media/knockout3-click-handler.mp4'; |
| jwplayer('flashContent3').setup({ |
| 'id': 'flashContentId', |
| 'width': '530', |
| 'height': '340', |
| 'autostart': 'false', |
| 'file': targetFile, |
| 'controlbar':{position:'bottom'}, |
| 'modes': [ |
| {type: 'html5'}, |
| {type: 'flash', src: '/images_www/js/mediaplayer-5.9/player.swf'}, |
| {type: 'download'} |
| ] |
| }); |
| }); |
| </script> |
| |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| |
| |
| <br style="clear:both;"> |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Video%20of%20Using%20KnockoutJS%20in%20an%20HTML5%20Application">Send Feedback on This Tutorial</a> |
| </div> |
| <br style="clear:both;"> |
| </td> |
| </tr> |
| </table> |
| <h2>Related links</h2> |
| |
| <ul> |
| <li><a href="html5-gettingstarted.html">Getting Started with HTML5 Applications</a></li> |
| <li><a href="https://blogs.oracle.com/netbeanswebclient/">NetBeans Web Client blog</a></li> |
| <li><a href="../../trails/php.html">PHP and HTML5 Learning Trail</a></li> |
| |
| </ul> |
| </body> |
| </html> |
