Handlebars.js和google电子表格显示/隐藏内容

Question

我正在尝试将我的内容从我的谷歌电子表格中导入到手柄中，使其成为我可以显示/隐藏的标签。单击该链接时，它会显示一个内容面板，并隐藏另一个内容面板。我有把手从两个谷歌电子表格中输入内容，但是当我添加时，尝试做隐藏/显示面板，它不起作用。我有一个隐藏/显示面板出现在一次，但没有内容从扶手在其中。

这是我的小提琴：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

Fiddler似乎在加载库时遇到了问题，但是当我在本地构建页面时，它可以正常工作。试试这个压缩文件，看看你还有什么问题。

http://cris.lc/qtpzm