如何在模型中引用复杂的json对象,以便它们可以显示在列表中

时间:2013-03-27 12:28:29

标签: extjs sencha-touch sencha-touch-2

我试图在我的模型中引用复杂的json对象,然后将它们与另一个对象一起显示在表中。下面是json的一个例子。怎么得到评级和打字?

   "reviews" : [
     {
        "aspects" : [
           {
              "rating" : 1,
              "type" : "food"
           },
           {
              "rating" : 3,
              "type" : "decor"
           },
           {
              "rating" : 2,
              "type" : "service"
           }
        ]


Ext.define('FirstApp.model.Details',{
extend:'Ext.data.Model',
config:{
  //  fields:     ['id','recordId','name','icon','vicinity','reference','website','reviews.aspects.type'],


 fields: [ {

name: 'aspects',
mapping: 'reviews.aspects'
},
  {
  name: 'vicinity'
  },
    {
   name: 'name'
  },
  {
  name: 'icon'
  },
 {
  name: 'website'
  }]

  }
  })

我正在调用下面的表格但是我收到错误Uncaught SyntaxError:itemTpl所在的意外标记ILLEGAL。

             {
              xtype:'list',
              store:'Details',
                itemTpl:'<img src="{icon}"></img><h1>{name:ellipsis(25)}</h1>
                <h3>{vicinity:ellipsis(35)}</h3><h2>{website}</2><h2>{reviews}</h2><tpl   for="aspects">
               {rating} - {type}
              </tpl>',
            itemCls:'place-entry'
           }

注意:

我尝试了以下内容。错误已经停止,所有其他信息都会显示,但方面仍然没有显示。

      itemTpl:new Ext.XTemplate(
        '<div>',
            '<div><img src="{icon}"></img><br>',
            '<h1>{name}</1><br>',
           ' </div>',
           '<div><h3>{vicinity:ellipsis(60)}</h3><h3>{website}</3><br>',
            '<h3>{formatted_phone_number}</h3><br>',
            '<tpl for="aspects"<td>{type}</td></tpl><br>',
           ' </div>',
        '</div>'
        ),

现在这是模型的外观:

  fields: [
 {

  name: 'reviews'

 },
 {

name: 'aspects',
mapping: 'reviews.aspects'
},

{
name: 'vicinity'
},
{
name: 'name'
 },
 {
name: 'icon'
},
{
name: 'website'
 },
 {
name: 'formatted_phone_number'}]

}

示例数据:

      "reviews" : [
        {
        "aspects" : [
           {
              "rating" : 3,
              "type" : "food"
           },
           {
              "rating" : 3,
              "type" : "decor"
           },
           {
              "rating" : 3,
              "type" : "service"
           }
        ],
        "author_name" : "Aubrey Skelly",
        "author_url" : "https://plus.google.com/101776084849290882399",
        "text" : "Small and wonderful, the food fantastic, service 100% miss this    wonderful restaurant and you will miss a gem in waterford",
        "time" : 1359588944
     },

1 个答案:

答案 0 :(得分:0)

我认为你必须在模型中进行映射:

fields: [
{
    name: 'aspects',
    mapping: 'reviews.aspects'
},
{
    name: 'vicinity'
}
...

然后在tpl:

<tpl for="aspects">
    {rating} - {type}
</tpl>

注意:

你不能在tpl中使用换行符:

//this will throw an error
itemTpl: '<div>this is some content<br>
         this is the same div but I am on a new line now</div>'

你必须拆分行:

//this is OK
itemTpl: '<div>this is some content<br>',
         'this is the same div but I am on a new line now</div>'