如何在将数据绑定到html时将敲除循环放在另一个循环中

时间:2014-05-29 09:04:51

标签: knockout.js

我在淘汰赛中获得json数据作为输出和绑定。

Json Data

{
"frequency": [
    {
        "freqid": "2",
        "freqname": "Monthly",
        "date": [
            "1-02-2014",
            "7-02-2014",
            "10-02-2013",
            "28-03-2013"
        ],
        "isindtl1": {
            "mkttp": "0",
            "mktdesc": "",
            "odpid": "",
            "srno": "1",
            "oclientid": "",
            "setlno": "",
            "txnqty": "200.000",
            "txndesc": "Rights Issue",
            "osetlno": "",
            "dorc": "D",
            "txnrefno": "1001233225",
            "txndt": "20130924"
        },
        "ny": "6.0",
        "ty": "0"
    },
    {
        "freqid": "3",
        "freqname": "Quarterly",
        "date": [
            "1-02-2014",
            "7-02-2014",
            "10-02-2013",
            "28-03-2013"
        ],

        "ny": "4.0",
        "ty": "0"
    }
]
}

这是有效的json,我使用敲除绑定在我的html中循环频率并显示这样的数据。

<div data-bind="foreach: FreqList">
              <div data-bind="text:freqname"></div>
</div> 

它正在工作,但我也想在这个循环中循环date,如下所示,对于每个频率,我都可以获得循环中的日期。

此外,我想循环isindtl1标记并希望获得所有值。

<div data-bind="foreach: FreqList">
                  <div data-bind="text:freqname"></div>
                  <span  data-bind="foreach: date"></span>
                   <span  data-bind="foreach: isindtl1">
                          <span  data-bind="text: txnissue"></span>
                   </span>
    </div> 

如何使用淘汰赛来做到这一点。

2 个答案:

答案 0 :(得分:0)

请试试这个

<div data-bind="foreach: FreqList">
 <div data-bind="text:freqname"></div>
  <!-- ko foreach:  $data.date -->
     <span  data-bind="text: $data"></span>
  <!-- /ko -->
</div> 

打印以下内容

Monthly
1-02-2014 7-02-2014 10-02-2013 28-03-2013
Quarterly
1-02-2014 7-02-2014 10-02-2013 28-03-2013

答案 1 :(得分:0)

在这里查看更新的Jsfiddle http://jsfiddle.net/pratbhoir/Hnug4/17/

你不能将foreach应用于那个因为它们没有相同的值,它不是数组。因此,您必须单独访问值

<div data-bind="foreach: freqList">
    <div data-bind="text:freqname"></div>
    <div data-bind="foreach:date"> <span data-bind="text: $data"></span>,</div>
    <div>mkttp: <span data-bind="text: isindtl1.mkttp"> </span></div>
    <div>mktdesc: <span data-bind="text: isindtl1.mktdesc"> </span></div>
    <div>odpid: <span data-bind="text: isindtl1.odpid"> </span></div>
    <div>srno: <span data-bind="text: isindtl1.srno"> </span></div>
    <div>oclientid: <span data-bind="text: isindtl1.oclientid"> </span></div>
    <div>setlno: <span data-bind="text: isindtl1.setlno"> </span></div>
    <div>txnqty: <span data-bind="text: isindtl1.txnqty"> </span></div>
    <div>txndesc: <span data-bind="text: isindtl1.txndesc"> </span></div>
    <div>osetlno: <span data-bind="text: isindtl1.osetlno"> </span></div>
    <div>dorc: <span data-bind="text: isindtl1.dorc"> </span></div>
    <div>txnrefno: <span data-bind="text: isindtl1.txnrefno"> </span></div>
    <div>txndt: <span data-bind="text: isindtl1.txndt"> </span></div>
    <div>ny: <span data-bind="text: isindtl1.ny"> </span></div>
    <div>ty: <span data-bind="text: isindtl1.ty"> </span></div>
    <br />
</div>

如果有帮助,请将此标记为答案