pureとjQuery ui Accordionを使ってみる

javascript jQuery

APIなどから取得したjson配列を展開してアコーディオンを構築する処理について、コードが煩雑だったのですが、pureとAccordionですっきりさせることができました。

pure+ jquery ui accordionでjson配列をマッピングするサンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>New Web Project</title>
   <script type="text/javascript" src="lib/jquery.js">
   </script>
   <script type="text/javascript" src="lib/pure.js">
   </script>
   <script type="text/javascript" src="lib/jquery-ui-1.7.3/js/jquery-ui-1.7.3.custom.min.js">
   </script>
   <link rel="stylesheet" type="text/css" href="lib/jquery-ui-1.7.3/css/vader/jquery-ui-1.7.3.custom.css" />
 </head>
 <body>
   <div id="fuga">
     <div class="users">
       <h3><a href="#" class="userId"></a></h3>
       <div class="userName"></div>
     </div>
   </div>

   <script type="text/javascript">
     var data = {users:[
     {
         userId: "11111",
         userName: "やまだ たろう"
     },
     {
         userId: "22222",
         userName: "いのうえ はなこ"
     }

     ]};
     $("#fuga").autoRender(data).accordion({header:"h3"});
   </script>
 </body>
</html>

jsは一行に収まりました。

ディレクティブで入れ子のjsonをマッピング

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>New Web Project</title>
   <script type="text/javascript" src="lib/jquery.js">
   </script>
   <script type="text/javascript" src="lib/pure.js">
   </script>
   <script type="text/javascript" src="lib/jquery-ui-1.8.5.custom/js/jquery-ui-1.8.5.custom.min.js">
   </script>
   <link rel="stylesheet" type="text/css" href="lib/jquery-ui-1.8.5.custom/css/vader/jquery-ui-1.8.5.custom.css" />
 </head>
 <body>
   <div class="scores">
     <div class="scoreBoard">
       <div class="teamName">
       </div>
       <div class="code"></div>
       <div class="teamPlace">
         <div class="playerName">
         </div>
       </div>
     </div>
   </div>
   <script type="text/javascript">
           var data = {
               "teams": [{
                 "name":"hoge",
                 "code":"aaa",
                 "players":[{
                   "name":"むふう"
                 },{
                   "name":"ぬふう"
                 }
                 ]
               }, {
                 "name":"fuga",
                 "code":"bbb",
                 "players":[{
                   "name":"うひい"
                 },{
                   "name":"うはあ"
                 }
                 ]
               }]
           };

           var directive = {
             "div.scoreBoard":{
               "team <- teams":{
                 ".teamName":"team.name",
                 ".teamPlace":{
                   "player <- team.players":{
                     ".playerName":"player.name"
                   }
                 }
               }
             }
           };
           $(".scores").autoRender(data, directive);

   </script>
 </body>
</html>