Question

我有一个简单的表，并使用knockout来填充数据。我正在尝试使用两个模板切换我的表体。我相信那是助推器不喜欢的东西。请看一下我的代码并给我建议。

<!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>

Answer 1

您在模板中不必要地包含tbody标记。模板内容将插入到父标记中，在您的情况下，该标记已是tbody元素。 Bootstrap失败，因为渲染表看起来像

<table>
 ...
 <tbody>
  <tbody> 
   ...

Bootstrap class =＆＃34; table＆＃34;不起作用

1 个答案: