Question

我从服务器检索以下Quotation结果的JSON数组。

  [{
     "id":"1",
     "name":"A",
     "year":"FY2013-2014",
     "Project":{
         "id" : "17",
         "name" : "ABC"
      },
     "Site":[
        {
         "id" : "12",
         "name" : "Victoria"
        },
        {
         "id" : "13",
         "name" : "Zulu"
        },
     ],
  },
  {
     "id":"2",
     "name":"B",
     "year":"FY2013-2014",
     "Project":{
         "id" : "19",
         "name" : "DEF"
      },
     "Site":[
        {
         "id" : "12",
         "name" : "Victoria"
        },
        {
         "id" : "14",
         "name" : "Mambo"
        },
     ],
  }
  ]

上面是一个包含2个词典的数组。

每个字典代表Quotation。

我知道如何使用Quotation显示Quotation ID和ItemTemplate名称。

 <script type="text/html" id="resultItemTemplate">
     <td><%= id %></td><!-- this is the Quotation id -->
     <td><%= name %></td><!-- this is the Quotation name -->
  </script>

我想知道如何显示Project的子词典结果，并在同一Site中迭代resultItemTemplate的词典子阵列。

我看到了这个link，但它并不适合字典的子阵列。

我正在使用以下库：

files[] = libs/jquery/1.10.2/jquery.js
files[] = libs/underscore/1.4.4/underscore.min.js
files[] = libs/backbone/0.9.10/backbone.min.js
files[] = libs/json/json2.js
files[] = libs/backbone/backbone.paginator.min.js

这是将解析JSON数据的PaginatedCollection代码。

(function (collections, model, paginator) {

    // Create a new collection using one of Backbone.Paginator's
    // pagers. We're going to begin using the requestPager first.

    collections.QuotationPaginatedCollection = paginator.requestPager.extend({
        // As usual, let's specify the model to be used
        // with this collection
        model: model,

        // We're going to map the parameters supported by
        // your API or backend data service back to attributes
        // that are internally used by Backbone.Paginator. 

        // e.g the NetFlix API refers to it's parameter for 
        // stating how many results to skip ahead by as $skip
        // and it's number of items to return per page as $top

        // We simply map these to the relevant Paginator equivalents

        // Note that you can define support for new custom attributes
        // adding them with any name you want

        paginator_core: {
            // the type of the request (GET by default)
            type: 'GET',

            // the type of reply (jsonp by default)
            dataType: 'jsonp',

            // the URL (or base URL) for the service
            url: '/quotations?'
        },

        paginator_ui: {
            // the lowest page index your API allows to be accessed
            firstPage: 1,

            // which page should the paginator start from 
            // (also, the actual page the paginator is on)
            currentPage: 1,

            // how many items per page should be shown
            perPage: 10,

            // a default number of total pages to query in case the API or 
            // service you are using does not support providing the total 
            // number of pages for us.
            // 10 as a default in case your service doesn't return the total
            totalPages: 10
        },

        server_api: {
            // the query field in the request
            'q': '',

            // we need to indicate whether to display or not
            'show' : 'no',

            // number of items to return per request/page
            'top': function() { return this.perPage },

            // how many results the request should skip ahead to
            // customize as needed. For the Netflix API, skipping ahead based on
            // page * number of results per page was necessary.
            'page': function() { return (this.currentPage) },

            // field to sort by
            'sort': function() {
                if(this.sortField === undefined)
                    return 'id';
                return this.sortField;
            },

            // sort field by direction
            'direction': function() {
                if(this.dirField === undefined)
                    return 'asc';
                return this.dirField;
            },

            // what format would you like to request results in?
            //'$format': 'json',

            // custom parameters
            '$inlinecount': 'allpages',
            '$callback': '?'
        },

        parse: function (response) {
            // Be sure to change this based on how your results
            // are structured (e.g response.products is CakePHP-Backbone specific)
            var products = response.data;
            var paging = response.paging;

            this.totalPages = paging.pageCount;
            this.totalRecords = paging.count;

            return products;
        },

        initialize: function(options) {
            if (options != undefined) {
                this.options = options;
                if ('proj' in this.options) {
                    this.server_api.proj = this.options.proj;
                }
            }
        },

    });

})( app.collections, app.models.Quotation, Backbone.Paginator);

Answer 1

显示我使用的词典数组：

<% _.each(Site, function (site) { %>
    <a href="#"><%= site.name %></a>
<% }); %>

显示我使用的子词：

<td><%= Project.name %></td>

所以它一起工作如下：

<script type="text/html" id="resultItemTemplate">
    <td><%= id %></td><!-- this is the Quotation id -->
    <td><%= name %></td><!-- this is the Quotation name -->
    <td><%= Project.name %></td>
    <td>
    <% _.each(Site, function (site) { %>
        <a href="#"><%= site.name %></a>
    <% }); %>
    </td>
</script>

拉出关系数据的JSON子阵列并放入Backbone模板

1 个答案: