Question

我有一个JSON对象，其中EntityCode，EntityName，TagName和TaskName（来自TagList）是表列标题。

然后，TaskRecordList中的StatusFlagName将位于与其相关的TaskName下的嵌套行中。 StatusFlagName值应直接位于TaskName下方。

我如何让这个工作？ StatusFlagName将不会显示。

＆＃13;

var ViewModel = function() {
this.taskRecords = ko.observableArray([
{
	EntityCode: "name",
  EntityName: "name desc23",
  TagName: "L1",
  TaskList: [
  	{
    	TaskName: "TaskABC",
      TaskRecordList: [
      	{ 
        	StatusFlagName: "OK"
        },
        { 
        	StatusFlagName: "TEST"
        }
      ]
    },
    {
    	TaskName: "TaskDEF",
      TaskRecordList: [
      	{ 
        	StatusFlagName: "Error"
        }
      ]
    }
  ]
}
]);
  
};
ko.applyBindings(new ViewModel());

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-bordered">
<tbody data-bind="foreach: taskRecords">
            <tr>
                <td data-bind="text: EntityCode"></td>
                <td data-bind="text: EntityName"></td>
                <td data-bind="text: TagName"></td>
                <td></td>
                <!--ko foreach: TaskList-->
                <td data-bind="text: TaskName">
                    <table>
                        <tbody>
                            <!--ko foreach: TaskRecordList-->
                            <tr>
                                <td data-bind="text: StatusFlagName"></td>
                            </tr>
                            <!--/ko-->
                        </tbody>
                    </table>
                </td>
                <!--/ko-->
                
            </tr>   
  </tbody>
</table>

＆＃13;

Answer 1

当您使用<td data-bind="text: TaskName">时，敲除会将此标记内的任何内容替换为TaskName的值作为文本，这就是为什么您的上一个嵌套表被TaskName值替换的原因。

您可以为div添加span或TaskName，如下所示：

 <table class="table table-bordered">
   <tbody data-bind="foreach: taskRecords">
      <tr>
         <td data-bind="text: EntityCode"></td>
         <td data-bind="text: EntityName"></td>
         <td data-bind="text: TagName"></td>
         <td></td>
         <!--ko foreach: TaskList-->
         <td> 
            <div data-bind="text: TaskName"></div>
            <table>
               <tbody>
                  <!--ko foreach: TaskRecordList-->
                  <tr>
                     <td data-bind="text: StatusFlagName"></td>
                  </tr>
                  <!--/ko-->
               </tbody>
            </table>
         </td>
         <!--/ko-->

      </tr>
   </tbody>
</table>

HTML表 - 使用Knockout的嵌套表行

1 个答案: