handlebars.js和Google电子表格显示/隐藏内容

Question

我正在尝试将我的内容从我的Google电子表格中带入车把，以显示我可以显示/隐藏的标签。当您单击链接时，它会显示一个内容面板，并隐藏了另一个内容面板。我的车把从两个Google电子表格中带入了内容，但是当我添加时尝试执行hide/显示面板时，它不起作用。我一次出现了hide/show面板，但车把没有任何内容。

这是我的小提琴：http：//jsfiddle.net/justawebbie/acw97/17/

这是JavaScript部分：

   function toggle_visibility(id) {
      var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
            else
          e.style.display = 'block';
    }

// Define spreadsheet URL.
   var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEoyWDYxb3hnZi1xWkl1TVQ0eERBQ2c#gid=0';
   var mySpreadsheet2='https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEpYUEg0VTJ0Rlpzb2RUOVZfLU5oX0E#gid=0'
// Compile the Handlebars template for HR leaders.
   var HRTemplate = Handlebars.compile($('#hr-template').html());
   var HRTemplate3 = Handlebars.compile($('#hr-template3').html());
// Load top five HR leaders.
    $('#hr').sheetrock({
       url: mySpreadsheet,
       sql: "select A,B,C,N,M,O where B contains 'yes' order by A desc",
       headersOff: true,
       headers: 2,
       rowHandler: HRTemplate
    });
    $('#hr3').sheetrock({
       url: mySpreadsheet2,
       sql: "select A,C,D,E order by A desc",
       headersOff: true,
       headers: 2,
       rowHandler: HRTemplate3
    });

此处的HTML部分：

    <ul>
       <li><a href="#" onclick="toggle_visibility('sec1');">Certificates</a></li>
       <li><a href="#" onclick="toggle_visibility('sec2');">Minors</a></li>
    </ul>
    <div id="sec1" style="background-color:pink;">
         <div id="hr" class="table">
            <script id="hr-template" type="text/x-handlebars-template">
             <div id='table-row'>
                       <div id='first-cell'><a href='{{cells.N}}' class='left-link'>{{cells.A}}</a></div>
               <div id='second-cell'><a href='{{cells.O}}' class='right-link'>{{cells.M}}</a></div>
                </script>
           </div>
     </div>  
     <div id="sec2" style="background-color:#eee;"> 
          <div id="hr3" class="table">
           <script id="hr-template3" type="text/x-handlebars-template">
            <div id='table-row'>
                        <div id='first-cell'><a href='{{cells.D}}' class='left-link'>{{cells.A}}</a></div>
                <div id='second-cell'><a href='{{cells.E}}' class='right-link'>{{cells.C}}</a></div>
                     </div>
               </script>
           </div>
      </div>

Answer 1

提琴手似乎在加载库中遇到问题，但是当我本地构建页面时，它可以正常工作。尝试此zip文件，看看您是否还有任何疑问。

http://cris.lc/qtpzm