knockout js嵌套循环不起作用

时间：2013-09-23 10:59:29

标签： knockout.js

您好我使用knockout js实现了一个视图我的数据有两个级别的循环我无法   循环第二件事，   我和脚本的观点如下

<div class="grid_16">
<div class="box">
    <h2>Project Billing Timesheet</h2>      
    </div>
    <div class="clear" style="height:5px;"></div>
    <?php echo $form->create('PpmBillingTs', array('id'=>'BillTsFrm', 'enctype'=>'multipart/form-data', 'url'=>'/'.$this->name.'/timesheet/save'),array( 



        <div class="clear" style="height:5px;"></div>
        <table style="border:2px solid #67BDE9;width:100%;" class="nopad prj">
            <thead>
                <tr>
                    <th colspan="5" class="boldbrd">Resource Information</th>
                    <th colspan="5" class="boldbrd">Hours</th>
                    <th colspan="4" class="boldbrd">Billing Hours</th>
                    <th colspan="2" class="boldbrd">Billing Amount</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <th style="width:50px;">Id</th>
                    <th style="width:80px;">Allocation</th>
                    <th style="width:100px;">Resource</th>
                    <th style="width:50px">Role</th>
                    <th style="width:54px;" class="boldbrd">Rate($)</th>
                    <th style="width:54px">Allocated</th>
                    <th style="width:54px">Vacation</th>
                    <th style="width:54px">Standard</th>
                    <th style="width:54px">OT</th>
                    <th style="width:54px" class="boldbrd">Approved</th>
                    <th style="width:54px">Standard</th>
                    <th style="width:54px">OT</th>  
                    <th style="width:54px">Total</th>
                    <th style="width:54px;" class="boldbrd">Unbilled</th>
                    <th style="width:54px">Rate($)</th>
                    <th style="width:70px" class="boldbrd">Amount</th>
                    <th class="boldbrd">Comments</th>
                </tr>
            </thead>

          <tbody class="noborder nocolor" data-bind="foreach: tsInfo">
                <tr><td colspan="17"></td></tr>
                <tr class="evenClr">
                    <td colspan="3" class="bold">Project # 120 - Project 1</td>
                    <td class="right">6.00</td>
                    <td class="right boldbrd">480.00</td>
                    <td class="right">0.00</td>
                    <td class="right">384.00</td>
                    <td class="right">0.00</td>
                    <td class="right">0.00</td>
                    <td class="right boldbrd">0.00</td>
                    <td class="right">0.00</td>
                    <td class="right">0.00</td>
                    <td class="right">0.00</td>
                    <td class="right boldbrd">0.00</td>
                    <td class="right">0.00</td>
                    <td class="right boldbrd">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="17" style="padding:0px">
                        <table class="overallRating">
                             <tr>
                                <td colspan="2" class="label right">Billing Action :&nbsp;</td>
                                <td class="left"><select name="data[PpmBillingTs][BillAction]" style="width:auto;" id="billAction" ><option>Billing Customer</option></select></td>
                                <td colspan="14"></td>
                            </tr>
                             <tr>
                                <td colspan="2" class="label right">Apply Discounts :&nbsp;</td>
                                <td class="left"><select name="data[PpmBillingTs][HasDiscounts]" style="width:auto;" id="IsDiscount" ><option>Yes</option></select></td></td>
                                <td colspan="2" class="label right">Discount Type :&nbsp;</td>
                                <td class="left"><select name="data[PpmBillingTs][DiscountType]" style="width:auto;" id="DiscountType" ><option>Select</option></select></td>
                                <td colspan="2" class="label right">Discount Amount:&nbsp;</td>
                                <td class="left"><input type="text" id="discAmount" class="billItem" name="data[PpmBillingTs][Discount]" style="width:120px;" value=200 /></td>
                                <td colspan="8"></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="label right">Comments :&nbsp;</td>
                                <td colspan="15">
                                    <textarea class="validate" style="width:96%" name="data[PpmBillingTs][Comments]" rows="3" >Test Comments</textarea>
                                </td>
                            </tr>
                            <tr class="addAttachments">
                                <td colspan="2" class="label right">Add Attachments :&nbsp;</td>
                                <td colspan="15">
                                    <input type="file" name="data[PpmBillingTs][attachments][]" class="multy"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="label right">Current Attachments :&nbsp;</td>
                                <td colspan="15">
                                    <?php if(!empty($attachments['Attachment']) && count($attachments['Attachment']) > 0){?>
                                    <div style="margin:10px 0 2px;">
                                        <?php foreach($attachments['Attachment'] as $attachment){?>
                                            <a style="padding:5px;" href="<?php echo $html->url('/app/getAttachment?accessKey='. $attachment['accessKey'], true);?>"><?php echo $attachment['file_name']?></a>
                                        <?php }?>
                                    </div>
                                    <?php }?>
                                </td>
                            </tr>
                            <tr><td colspan="17" style="height:20px;"></td></tr>
                            <?php //if($action == 'fmReview' || $action == 'fmView'){?>
                            <?php if(true){?>
                            <tr>
                                <td colspan="2" class="label right">Finance Comments :&nbsp;</td>
                                <td colspan="15">
                                    <textarea id="FinCommentsTxt" class="validate" style="width:96%" name="data[PpmBillingTs][FinComments]" rows="3" >Test Finance Comments</textarea>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>   
                <?php }?>
                <tr data-bind="foreach: PpmBillingTsDtl">
                    <td data-bind="attr: {title: AllocTypeName}"><div class="elps" style="width:80px;" data-bind="text: AllocTypeName"></div></td>
                    <td data-bind="attr: {title: ResourceName}"><div class="elps" style="width:140px;" data-bind="text: ResourceName"></div></td>
                    <td data-bind="attr: {title: ResourceRole}"><div class="elps" style="width:60px;" data-bind="text: ResourceRole"></div></td>
                    <td class="right boldbrd"><span id="bilrate" data-bind="text: StdBillRate"></span></td>
                    <td class="right"><span data-bind="text: AllocHours"></span></td>
                    <td class="right"><span data-bind="text: LeaveHours"></span></td>
                    <td class="right"><span data-bind="text: WrkStdHours"></span></td>
                    <td class="right"><span data-bind="text: WrkOTHours"></span></td>
                    <td class="right boldbrd"><span data-bind="text: WrkAprvHours"></span></td>
                    <td class="right"><input type="text" fld="BillStdHours" class="billItem validate" data-bind="value: BillStdHours, attr: {dtlId: Id}" /></td>
                    <td class="right"><input type="text" fld="BillOTHours" class="billItem validate" data-bind="value: BillOTHours, attr: {dtlId: Id}"></td>
                    <td class="right" ></td>

                    <td class="right boldbrd" style="border-right: 2px solid #67BDE9;" ></td>
                    <td class="right"><input type="text" fld="FinalBillRate" class="validate billItem" data-bind="value: FinalBillRate, attr: {dtlId: Id}"></td>
                    <td class="right boldbrd" style="border-right: 2px solid #67BDE9;" ></td>
                    <td class="boldbrd"><textarea fld="Comments" style="margin:0px;width:90%;" class="validate" rows="1" data-bind="value: Comments, attr: {dtlId: Id}"></textarea></td>
                </tr>
                 <tr><td colspan="17"></td></tr>
            </tbody>
        </table>


    <?php echo $html->tags['formend'];?>
</div>
 </div>
 <script>
$('#savBtn').button();
$('#submtBtn').button();
$('a.action').button();
$('table.prj').expcolFlat();
$(document).ready(function(){
    var projectData = <?php echo $projectInfo?>;
    var project = ko.mapping.fromJS(projectData);
    ko.applyBindings(project);
});

我正面临下一行附近的问题            如果我这样写，那么ko并排渲染数据就不会占用任何新行

我改变了这样的代码

<tr>
 <tbody data-bind="foreach: TsDtl">
   <tr>
    //above code
   </tr>
 </tbody>

它会产生以下错误

  Error: Unable to parse bindings. Message: ReferenceError: PpmBillingTsDtl is not    
 defined; Bindings value: foreach: PpmBillingTsDtl
 return new Function("sc", functionBody);


My json Data: 
{
"tsInfo": [
{
  "PpmBillingTs": {
    "Id": 1019,
    "ProjectId": 204,
    "ScheduleId": 140,
    "Status": "In PM Review",
    "FromDate": "01 Aug 2013",
    "ToDate": "31 Aug 2013",
    "BillAction": "",
    "BillingAmount": "0.00",
    "HasDiscount": 0,
    "DiscountType": "0",
    "DiscountAmount": "0.00",
    "NetBillAmount": "0.00",
    "InvoiceAmount": "0.00",
    "CreatedOn": "2013-09-04",
    "Comments": "",
    "History": "",
    "PctComplete": "0.00",
    "FinComments": "",
    "AccAmount": null,
    "BalAmount": null,
    "TotPrjVal": null,
    "key": "QMDewA1iYF%2FPy5z5fwmOEw%3D%3D"
  },
  "PpmBillingSchedule": {
    "Id": 140,
    "ProjectId": 72,
    "ProjectType": 2616,
    "SchedType": "MONTH",
    "SchedDay": "LAST",
    "Comments": "",
    "StartDate": "2010-07-19",
    "EndDate": "2014-04-30",
    "LastSchedDate": null,
    "Active": 1
  },
  "PpmBillingTsDtl": [
    {
      "Id": 5481,
      "ResourceId": 11668,
      "ResourceName": "Shruti Patnaik",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "QA Analyst",
      "AllocHours": "160.00",
      "WrkStdHours": "144.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "0.00",
      "WrkAprvHours": "0.00",
      "StdBillRate": "0.00",
      "BillStdHours": "0.00",
      "BillOTHours": "0.00",
      "BillTotHours": "0.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF+y8EqtV4wVfQ=="
    },
    {
      "Id": 5478,
      "ResourceId": 10937,
      "ResourceName": "Srinivasa Rao Palla",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "Developer",
      "AllocHours": "160.00",
      "WrkStdHours": "128.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "16.00",
      "WrkAprvHours": "128.00",
      "StdBillRate": "0.00",
      "BillStdHours": "128.00",
      "BillOTHours": "0.00",
      "BillTotHours": "128.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF\/nAdFdFQbsMg=="
    },
    {
      "Id": 5480,
      "ResourceId": 10978,
      "ResourceName": "Tulasiram Sangaram",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "Developer",
      "AllocHours": "160.00",
      "WrkStdHours": "0.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "8.00",
      "WrkAprvHours": "0.00",
      "StdBillRate": "0.00",
      "BillStdHours": "0.00",
      "BillOTHours": "0.00",
      "BillTotHours": "0.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF\/5xKvs6Ielqw=="
    },
    {
      "Id": 5479,
      "ResourceId": 10970,
      "ResourceName": "Uday Bhaskar Golla",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "Developer",
      "AllocHours": "160.00",
      "WrkStdHours": "0.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "8.00",
      "WrkAprvHours": "0.00",
      "StdBillRate": "0.00",
      "BillStdHours": "0.00",
      "BillOTHours": "0.00",
      "BillTotHours": "0.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF9d\/\/d70CB+Qg=="
    }
  ],
  "Info": {
    "ProjectId": 204,
    "ProjectName": "[ 204 ] ADM Internal Portal",
    "ClientName": "ADM Practice",
    "PracticeName": "ADM",
    "PrimaryPM": "Raghu Prasad Chinta",
    "ProjectStatus": "Project Approved",
    "PlannedStartDate": "2013-08-01",
    "PlannedEndDate": "2013-10-30",
    "IsBillable": 1,
    "ContractTermId": 2615,
    "ContractTerms": "Fixed Price"
  },
  "billActions": [
    "Accrue Only",
    "Bill To Customer"
  ]
},
{
  "PpmBillingTs": {
    "Id": 1019,
    "ProjectId": 204,
    "ScheduleId": 140,
    "Status": "In PM Review",
    "FromDate": "01 Aug 2013",
    "ToDate": "31 Aug 2013",
    "BillAction": "",
    "BillingAmount": "0.00",
    "HasDiscount": 0,
    "DiscountType": "0",
    "DiscountAmount": "0.00",
    "NetBillAmount": "0.00",
    "InvoiceAmount": "0.00",
    "CreatedOn": "2013-09-04",
    "Comments": "",
    "History": "",
    "PctComplete": "0.00",
    "FinComments": "",
    "AccAmount": null,
    "BalAmount": null,
    "TotPrjVal": null,
    "key": "QMDewA1iYF%2FPy5z5fwmOEw%3D%3D"
  },
  "PpmBillingSchedule": {
    "Id": 140,
    "ProjectId": 72,
    "ProjectType": 2616,
    "SchedType": "MONTH",
    "SchedDay": "LAST",
    "Comments": "",
    "StartDate": "2010-07-19",
    "EndDate": "2014-04-30",
    "LastSchedDate": null,
    "Active": 1
  },
  "PpmBillingTsDtl": [
    {
      "Id": 5481,
      "ResourceId": 11668,
      "ResourceName": "Rajaram",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "QA Analyst",
      "AllocHours": "160.00",
      "WrkStdHours": "144.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "0.00",
      "WrkAprvHours": "0.00",
      "StdBillRate": "0.00",
      "BillStdHours": "0.00",
      "BillOTHours": "0.00",
      "BillTotHours": "0.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF+y8EqtV4wVfQ=="
    },
    {
      "Id": 5478,
      "ResourceId": 10937,
      "ResourceName": "Srinivasa Rao Palla",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "Developer",
      "AllocHours": "160.00",
      "WrkStdHours": "128.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "16.00",
      "WrkAprvHours": "128.00",
      "StdBillRate": "0.00",
      "BillStdHours": "128.00",
      "BillOTHours": "0.00",
      "BillTotHours": "128.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF\/nAdFdFQbsMg=="
    },
    {
      "Id": 5480,
      "ResourceId": 10978,
      "ResourceName": "Tulasiram Sangaram",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "Developer",
      "AllocHours": "160.00",
      "WrkStdHours": "0.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "8.00",
      "WrkAprvHours": "0.00",
      "StdBillRate": "0.00",
      "BillStdHours": "0.00",
      "BillOTHours": "0.00",
      "BillTotHours": "0.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF\/5xKvs6Ielqw=="
    },
    {
      "Id": 5479,
      "ResourceId": 10970,
      "ResourceName": "Uday Bhaskar Golla",
      "AllocType": 17061,
      "AllocTypeName": "Project Enablement",
      "ResourceRole": "Developer",
      "AllocHours": "160.00",
      "WrkStdHours": "0.00",
      "WrkOTHours": "0.00",
      "LeaveHours": "8.00",
      "WrkAprvHours": "0.00",
      "StdBillRate": "0.00",
      "BillStdHours": "0.00",
      "BillOTHours": "0.00",
      "BillTotHours": "0.00",
      "UnBillHours": "0.00",
      "FinalBillRate": "0.00",
      "BillAmount": "0.00",
      "Comments": "",
      "key": "QMDewA1iYF9d\/\/d70CB+Qg=="
    }
  ],
  "Info": {
    "ProjectId": 204,
    "ProjectName": "[ 205 ] ADM Internal Portal",
    "ClientName": "ADM Practice",
    "PracticeName": "ADM",
    "PrimaryPM": "Raghu Prasad Chinta",
    "ProjectStatus": "Project Approved",
    "PlannedStartDate": "2013-08-01",
    "PlannedEndDate": "2013-10-30",
    "IsBillable": 1,
    "ContractTermId": 2615,
    "ContractTerms": "Fixed Price"
  },
  "billActions": [
    "Accrue Only",
    "Bill To Customer"
  ]
}

] }

1 个答案:

答案 0 :(得分：0)

您不能对重复元素使用容器绑定。向下滚动到in the KO docs中的注释4。正如您在那里的示例中所看到的，您将必须使用 containerless control flow syntax ，如下所示：

<!-- ko foreach: PpmBillingTsDtl -->
    <tr><td>Item <span data-bind="text: $data"></span></td></tr>
<!-- /ko -->

作为旁注，我强烈建议你stop using tables for layout。

相关问题
最新问题