2015-06-25 3 views
0

У меня есть простая таблица, и я использую нокаут для заполнения данных. Я пытаюсь переключить тело таблицы с помощью двух шаблонов. Я считаю, что это то, что не нравится. Пожалуйста, взгляните на мой код и дайте мне советы.Bootstrap class = "table" does not work

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type='text/javascript' src='Scripts/knockout-3.1.0.js'></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="container">    
    <table class="table" data-bind="visible: folks().length > 0" > 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody data-bind="template: { name: templateToUse, foreach: folks}"></tbody> 
    </table> 
    <button data-bind="click: $root.addItem">New Item</button> 
</div> 
</body> 
</html> 

<script type='text/javascript' src='Scripts/myscript.js'></script> 
<script id="itemTmpl" type="text/html"> 
    <tbody> 
     <tr> 
      <td> 
       <span data-bind="text: name"></span> 
      </td> 
      <td> 
       <span data-bind="text: age"></span> 
      </td>    
      <td class="buttons"> 
       <button>Edit</button> 
       <button>Delete</button>    
      </td> 
     </tr>     
    </tbody> 
</script> 

<script id="editTmpl" type="text/html"> 
<tbody> 
     <tr> 
      <td> 
       <input type="text" data-bind="value: name" ></input>     
      </td>   
      <td> 
       <input data-bind="value: age"></input>    
      </td> 
      <td class="buttons"> 
       <button>Done</button> 
       <button>Cancel</button> 
      </td>   
     </tr> 
</tbody> 
</script> 
+0

Вы никогда не закрываете свой первый тём? – g3mini

+0

@ g3mini: он закрыт, такая же строка. – dfperry

+0

О да, ты прав. Извините, – g3mini

ответ

1

Вы включая tbody тег без необходимости в шаблонах. Содержимое шаблона вставляется в родительский тег, который в вашем случае уже является элементом tbody. Bootstrap не работает, потому что отображаемая таблица выглядит как

<table> 
... 
<tbody> 
    <tbody> 
    ... 
+0

Замечательное спасибо. – bangbang