Как создать HTML из шаблонов JSON и JQuery - PullRequest
Новая
       16

Как создать HTML из шаблонов JSON и JQuery

0 голосов
/ 16 ноября 2010

Я знаю, что где-то путаю синтаксис, но не могу понять где.Код ниже.(Я пропустил тег body, потому что он не отображался правильно в предварительном просмотре) 

<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmplPlus.js" type="text/javascript"></script>
    <script id="ProductsTemplate" type="text/x-jquery-tmpl">
        <table class="productsHere">
            <thead>
                <tr>
                    <td>Title</td>
                    <td>Size</td>
                    <td>Price</td>
                </tr>
            </thead>
            <tbody>
                {{each data}}
                    {{tmpl($value) '#ProductsRowTemplate'}}
                {{/each}}
            </tbody>            
        </table>
    </script>
    <script id="ProductsRowTemplate" type="text/html">
        <tr>
            <td class="title">${title}</td>
            <td class="size">${size}</td>
            <td class="price">${price}</td>
        </tr>
    </script>
    <title>Using JQuery</title>
</head>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "JSON-WebService.asmx/getProducts",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable');
                alert("It works");
            },
            failure: function (data) {
                alert("It didn't work");
            }
        });
    });
</script>

<div id="ProductsTable"></div>
<div id="OthersTable"></div>
<div></div>

</form>

1 Ответ

1 голос
/ 16 ноября 2010

Предполагая, что вы используете .NET 3.5+ и getProducts возвращает коллекцию, такую ​​как List или массив, вам необходимо учитывать .d, в который .NET упаковывает ваши данные . Так как ваш цикл {{each}} все равно нуждается в ссылке на массив, вы можете воспользоваться .d, изменив свой шаблон следующим образом: 

<script id="ProductsTemplate" type="text/x-jquery-tmpl">
  <table class="productsHere">
    <thead>
      <tr>
        <td>Title</td>
        <td>Size</td>
        <td>Price</td>
      </tr>
    </thead>
    <tbody>
      {{each d}}
        {{tmpl($value) '#ProductsRowTemplate'}}
      {{/each}}
    </tbody>
  </table>
</script>
...