使用Ember Handle条形时,不会渲染Jquery数据表

时间:2014-10-10 11:20:58

标签: jquery ember.js jquery-datatables

我正在尝试显示一个填充了ember模型数据的jquery数据表。当我使用ember句柄时,jq​​uery数据表不会被渲染(即它呈现为普通的HTML表格)。任何人都知道这里有什么问题吗? 这是我的html文件,其中包含数据表,提交按钮和其他一些字段:

<?xml version="1.0" encoding="UTF-8"?>
<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>TestPage</title>
      <meta name="viewport" content="width-device-width" initial-scale="1">
      <link href="tp/bootstrap-3.2.0-dist/css/bootstrap.css" rel="stylesheet">
      <link href="tp/jquery/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet">
      <link href="tp/jquery/datatables/css/jquery.dataTables.css" rel="stylesheet">
      <link href="" rel="stylesheet">
      <link href="css/styles.css" rel="stylesheet">
      <script src="tp/jquery/jquery-1.11.1.js"></script>
      <script src="tp/jquery/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
      <script src="tp/jquery/datatables/js/jquery.dataTables.js"></script>

      <script src="tp/ember/handlebars-1.1.2.js"></script>
      <script src="tp/ember/ember-1.7.0.js"></script>
      <script src="js/app.js"></script>


      <script>


           $(document).ready(function() {
            $( "#radio" ).buttonset();
            $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
            $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );  

             $('#example').dataTable( {
                 "scrollY":        200,
                 "scrollCollapse": true,
                 "jQueryUI":       true
             } );
         } );    

      </script>


      <style>
         .ui-tabs-vertical { width: 55em; }
         .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em;
         float: left; 
         width: 12em; }
         .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%;
         border-bottom-width: 1px !important;
         border-right-width: 0 !important;
         margin: 0 -1px .2em 0; }
         .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
         .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0;
         padding-right: .1em;
         border-right-width: 1p;
         border-right-width: 1px; }
         .ui-tabs-vertical .ui-tabs-panel { padding: 1em;
         float: right; 
         width: 40em;}
      </style>
   </head>
   <body>
      <header id="headerArea" class="row">
         <div class="col-md-2">
            <!-- dst logo goes here -->
            <img id="logo" src="images/DST-logo.png" alt=""/> 
         </div>
         <div class="col-md-10">
            <!-- header info goes here -->
            <h1>AWD Customer Service</h1>
         </div>
      </header>



      <div id="applicationArea" class="row">
      <nav id="navigation" class="col-md-1">

            <!-- nav stuff goes here -->
            <ul>
               <li>nav1</li>
               <li>nav1</a></li>
               <li>nav1</a></li>
            </ul>

      </nav>
      <main id="content" class="col-md-10">     
         <!-- main content goes here -->
         <form onSubmit="showTable()">
         <section id="providerSearchForm">

            <div class="row"> <!-- begin inputs, table row -->

                  <div id="providerSearchFormInputs" class="col-md-2">
                     <div id="radio"> <!-- begin radio div -->
                        <p>
                           <input type="radio" id="radio1" name="radio" />
                           <label for="radio1">Institutional</label>
                        </p>
                        <p>                        
                           <input type="radio" id="radio2" name="radio" checked="checked" />
                           <label for="radio2">Professional</label>
                        </p>
                     </div> <!-- end radio div -->
                     <p>
                        <label for="provider number">provider number</label><br>
                        <input  type="text" id="provider number">
                     </p>
                     <p>   
                        <label for="last name">last name</label><br>
                        <input  type="text" id="last name">
                     </p>
                     <p>   
                        <label for="first name">first name</label><br>
                        <input  type="text" id="first name">
                     </p>
                     <p>   
                        <label for="npi">npi</label><br>
                        <input  type="text" id="npi">
                     </p>
                     <p>                    
                        <label for="tax id">tax id</label><br>
                        <input  type="text" id="tax id">
                     </p>
                     <p>                    
                        <label for="specialty">specialty</label><br>
                        <input  type="text" id="specialty">
                     </p>
                     <p>                 
                        <label for="zip">zip</label><br>
                        <input  type="text" id="zip">
                     </p>


                  </div>

                  <!-- end div providerSearchFormInputs -->


                      <div class="col-md-10"> <!-- start searchtable div -->
                           <!-- putting datatable here-->

                                <table id="example" class = 'table' >
                                    <thead>
                                       <tr>
                                          <th>Name</th>
                                          <th>Position</th>
                                          <th>Office</th>
                                          <th>Age</th>
                                          <th>Start date</th>
                                          <th>Salary</th>
                                       </tr>
                                    </thead>
 <script type="text/x-handlebars" id="posts">                                  
                                    {{#each}}
                                    <tr>
                                          <td>{{name}}</td>
                                          <td>{{position}}</td>
                                          <td>{{office}}</td>
                                          <td>{{age}}</td>
                                          <td>{{date}}</td>
                                          <td>{{salary}}</td>
                                       </tr>            
                                       {{/each}}
</script>                                    
                                 </table>

                        </div><!-- end searchtable div -->

             </div> <!-- end inputs, table -->
              <script type="text/x-handlebars">  
                   <div>
                         <button type="submit">{{#link-to 'posts'}}Submit{{/link-to}}</button>
                     </div>
                            {{outlet}}
                  </script>
          </section><!-- end section providerSearchForm -->

         </form>
      </main>


      <aside id="asideArea" class="col-md-1">

                  <img src="images/MDWise_600x600-240x240.png" width="100%" alt=""/> 
                  <img src="images/logo-centene.jpg" width="100%" alt=""/> 
                  <img src="images/JHMI_logo_stacked.jpg" width="100%" alt=""/> 
                  <img src="images/FirstCarolinaCare.gif" width="100%" alt=""/> 
                  <img src="images/harvard_medical.jpg" width="100%" alt=""/> 
                  <p>Dogs love to eat meat. So do cats... yada, yada, yada</p>
      </aside>

      <footer id="footerArea" class="row">
         <div class="col-md-2"></div>
         <div class="col-md-10">
            <!-- footer stuff goes here -->
            Here is some footer content... Grecso pilsno snoggle sosgn idsphe sindnsl skjakch
         </div>
      </footer>
   </body>
</html>

以下是我的模特:

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('providerSearchSubmit');
  this.resource('posts' , function() {

  });
});



App.PostsRoute = Ember.Route.extend({
  model:function(){
    return posts;
  }

});



var posts =[{
  position:'Software Engineer' ,
  name: "Vinay",
  office: "DST" ,
  date: new Date('10-4-2014'),
  salary: "50000" ,
  age: "25" 
},  { 

  position:'Project Lead' ,
  name: "Thiru",
  office: "DST" ,
  date: new Date(),
  salary: "60000" ,
  age: "37" 
}, {
  position:'Senior Software Engineer' ,
  name: "Ashok",
  office: "DST" ,
  date: new Date(),
  salary: "60000" ,
  age: "31" 
}];

0 个答案:

没有答案