如何使用jsrender动态显示数据

Question

我有这个 JSON 数据：

var mydata = {
    "bcListResponse": {
        "cardslist": [{
            "emails": [],
            "mobiles": [],
            "bcFirstName": "",
            "titles": [],
            "bcLastName": "",
            "businessCardId": 300
        }, {
            "emails": [{
                "email": "gregetbtr@crgtgb.fcefe"
            }, {
                "email": "dfewv@degbt.cgd"
            }],
            "mobiles": [{
                "mobile": "24154545454545"
            }, {
                "mobile": "205555555555"
            }],
            "bcFirstName": "aa",
            "titles": [{
                "company": "fefef",
                "title": "efe"
            }],
            "bcLastName": "bb",
            "businessCardId": 302
        }, {
            "emails": [],
            "mobiles": [{
                "mobile": "53643489"
            }],
            "bcFirstName": "ghfj",
            "titles": [],
            "bcLastName": "teyktuyklyi",
            "businessCardId": 303
        }, {
            "emails": [],
            "mobiles": [{
                "mobile": "jtykuyyukl"
            }],
            "bcFirstName": "hgyujg",
            "titles": [],
            "bcLastName": "ethryj",
            "businessCardId": 304
        }],
        "error": "",
        "status": "success"
    }
};

我使用此代码显示数据，但它不起作用：

<script id="templateData" type="text/x-jsrender">
        <tr>                
            <td class="details">
                <table class="CardTable" cellpadding="3" cellspacing="2">
                    <colgroup>
                        <col width="50%">
                        <col width="50%">
                    </colgroup>
                    <tbody>   
                        <tr>
                            <td>{{:bcFirstName}}  {{:bcLastName}} </td>
                        </tr>   
                    </tbody>
                </table>
            </td>
        </tr>
</script>
<script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.employeeData" is referred from templatelocaldata.js
                dataSource: mydata,
                allowScrolling: true,
                scrollSettings: { height: 380, width: 500 },
                rowTemplate: "#templateData",
                columns: [
                        {  },
                        {  }
                ]
            });
        });
</script>

有人知道如何使用 jsrender 动态显示数据吗？

Answer 1

使用这个

Javascript

var products={
  "bcListResponse": {
    "cardslist": [
      {
        "emails": [

        ],
        "mobiles": [

        ],
        "bcFirstName": "",
        "titles": [

        ],
        "bcLastName": "",
        "businessCardId": 300
      },
      {
        "emails": [
          {
            "email": "gregetbtr@crgtgb.fcefe"
          },
          {
            "email": "dfewv@degbt.cgd"
          }
        ],
        "mobiles": [
          {
            "mobile": "24154545454545"
          },
          {
            "mobile": "205555555555"
          }
        ],
        "bcFirstName": "aa",
        "titles": [
          {
            "company": "fefef",
            "title": "efe"
          }
        ],
        "bcLastName": "bb",
        "businessCardId": 302
      },
      {
        "emails": [

        ],
        "mobiles": [
          {
            "mobile": "53643489"
          }
        ],
        "bcFirstName": "ghfj",
        "titles": [

        ],
        "bcLastName": "teyktuyklyi",
        "businessCardId": 303
      },
      {
        "emails": [

        ],
        "mobiles": [
          {
            "mobile": "jtykuyyukl"
          }
        ],
        "bcFirstName": "hgyujg",
        "titles": [

        ],
        "bcLastName": "ethryj",
        "businessCardId": 304
      }
    ],
    "error": "",
    "status": "success"
  }
};




// No template
var i = 1;
$(products.bcListResponse.cardslist).each(function() {
    debugger;
    var product = this;
    $("#output1").append("" + product.bcFirstName + " " + product.bcLastName + "");
})
//With a JsRender template
$('#output2').html($('#myTmpl').render(products.bcListResponse.cardslist));

HTML 可能像

<table>
    <tr>
        <td class="details">
            <table class="CardTable" cellpadding="3" cellspacing="2">
                <colgroup>
                    <col width="50%" />
                    <col width="50%" />
                </colgroup>
                <tbody>
                    <div id="output2">
                    </div>

                </tbody>
            </table>
        </td>
    </tr>
</table>
<hr />

<h3>With a template</h3>
<div id="output1">
</div>

<script id="myTmpl" type="text/x-jsrender">        
                            <tr>   
                                <td>{{:bcFirstName}}  {{:bcLastName}} </td>
                            </tr>

</script>

DEMO

如何使用jsrender动态显示数据

How to show data dynamically using jsrender

html

javascript

jsrender