| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <title>在 HTML5 应用程序中使用 KnockoutJS 的视频</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>在 HTML5 应用程序中使用 KnockoutJS 的视频</h1> |
| <p>在本视频教程系列中，我们将了解如何使用 jQuery 和 KnockoutJS 构建客户端 HTML5 应用程序。我们将学习将 DOM 元素绑定到数据模型，定义事件处理程序，以及从 JSON 和 REST 服务提取数据。</p> |
| <p>作者：John Jullion-Ceccarelli</p> |
| <table> |
| <tr> |
| <td class="valign-top"> |
| |
| |
| |
| |
| |
| |
| <h3>下载/观看全图：</h3> |
| <ul> |
| <li><a href="http://bits.netbeans.org/media/knockout1-basic-bindings.mp4">Knockout 第 1 部分 - 基本绑定</a> (15 MB)</li> |
| <li><a href="http://bits.netbeans.org/media/knockout2-json.mp4">Knockout 第 2 部分 - JSON</a> (12 MB)</li> |
| <li><a href="http://bits.netbeans.org/media/knockout3-click-handler.mp4">Knockout 第 3 部分 - 单击处理程序</a> (19 MB)</li> |
| </ul> |
| |
| |
| |
| </td> |
| |
| <td width="486" class="valign-top align-center"> |
| <h2>Knockout 第 1 部分 - 基本绑定</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 第 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 第 3 部分 - 单击处理程序</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">发送有关此教程的反馈意见</a> |
| </div> |
| <br style="clear:both;"> |
| </td> |
| </tr> |
| </table> |
| <h2>相关链接</h2> |
| |
| <ul> |
| <li><a href="html5-gettingstarted.html">HTML5 应用程序入门</a></li> |
| <li><a href="https://blogs.oracle.com/netbeanswebclient/">NetBeans Web 客户端博客</a></li> |
| <li><a href="../../trails/php.html">PHP 和 HTML5 学习资源</a></li> |
| |
| </ul> |
| </body> |
| </html> |
