如何在Sencha Touch中实现层次模型

时间:2011-11-30 18:36:58

标签: javascript model sencha-touch

我已经阅读了很多问题/答案和教程,但仍然无法在Sencha Touch中实现分层模型。根模型是Tag。每个标签都有很多项目。这是我的模特:

根标签:

app.models.Tag = Ext.regModel("Tag", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "name",
        type : "string"
    }], 
    associations : {
        type : "hasMany",
        model : "TagItem", 
        name : "items"
    }
});

Adjected TagItem

app.models.TagItem = Ext.regModel("TagItem", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "title",
        type : "string"
    }, {
        name : "type", 
        type : "string"
    }, {
        name : "tag_id", 
        type : "int"
    }], 
    associations : {
        belongsTo : {
            model : "Tag",
            name : "items"
        }
    }
});

TagStore:

app.stores.tagItems = new Ext.data.Store({
    model : "app.models.TagItem",
    proxy : {
        type : 'scripttag',
        root : 'items',
        url : 'http://www.s-lab.cz/ios/api/tags.php'
    }
});

标签:

app.stores.tags = new Ext.data.Store({
    model : "app.models.TagItems",
    proxy : {
        type : 'scripttag',
        url : 'http://www.s-lab.cz/ios/api/tags.php'
    }
});

当我尝试从商店加载商品时,我得到:

未捕获的TypeError:无法调用未定义的方法'read'

我的JSON看起来像这样:

stcCallback1005([
 {
    "id":1,
    "name":"Doktor",
    "url":"doktor",
    "items":[
       {
          "type":"video",
          "id":1,
          "title":"First tag item",
          "tag_id":1
       },
       {
          "type":"article",
          "id":1,
          "title":"Second tag item - article",
          "tag_id":1
       },
       {
          "type":"article",
          "id":2,
          "title":"Third tag item - article",
          "tag_id":1
       },
       {
          "type":"video",
          "id":2,
          "title":"Fourth tag item",
          "tag_id":1
       }
    ]
 },
 {
    "id":2,
    "name":"Nemocnice",
    "url":"nemocnice"
 },
 {
    "id":3,
    "name":"Sestra",
    "url":"sestra"
     }
  ]);

更新

我使用建议更改了代码,生成的JSON如下所示:

stcCallback1005({
    "results": [{
        "id": 1,
        "name": "Doktor",
        "url": "doktor",
        "items": [{
            "type": "video",
            "id": 1,
            "title": "First tag item",
            "tag_id": 1
        }, {
            "type": "article",
            "id": 1,
            "title": "Second tag item - article",
            "tag_id": 1
        }, {
            "type": "article",
            "id": 2,
            "title": "Third tag item - article",
            "tag_id": 1
        }, {
            "type": "video",
            "id": 2,
            "title": "Fourth tag item",
            "tag_id": 1
        }]
    }, {
        "id": 2,
        "name": "Nemocnice",
        "url": "nemocnice"
    }, {
        "id": 3,
        "name": "Sestra",
        "url": "sestra"
    }]
});

但我仍然无法访问后续项:app.stores.tags.getAt(0)有效,但app.stores.tags.getAt(0).TagItems()没有(app.stores.tags.getAt(0).itemsapp.stores.tags.getAt(0).items()都没有)。此外,我的模板无法正确呈现:<tpl for=".">{name}<ul><tpl for="items"><li>{title} ({type})</li></tpl></ul></tpl>

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

我认为您不需要为模型注册分配变量。

Ext.regModel("Tag", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "name",
        type : "string"
    }], 
    associations : {
        type : "hasMany",
        model : "TagItem", 
        name : "items"
    }
});

因此;

Ext.regModel("TagItem", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "title",
        type : "string"
    }, {
        name : "type", 
        type : "string"
    }, {
        name : "tag_id", 
        type : "int"
    }], 
    associations : {
        belongsTo : {
            model : "Tag",
            name : "items"
        }
    }
});

将阅读器添加到json并更正已注册的模型名称。

TagStore:

app.stores.tagItems = new Ext.data.Store({
    model : "TagItem", //Use registered name
    proxy : {
        type : 'scripttag',
        url : 'http://www.s-lab.cz/ios/api/tags.php'

                   reader: { //add reader to read from json
                      type: 'json',
                      root: 'results'
                   }
    }
});

标签:

app.stores.tags = new Ext.data.Store({
    model : "Tag", //Use registered name
    proxy : {
        type : 'scripttag',
        url : 'http://www.s-lab.cz/ios/api/tags.php'
                   reader: { //add reader to read from json
                      type: 'json',
                     root: 'results'
                   }
    }
});

最后,您可能需要将tags.php中的json格式更改为;

{"results":[
 {
    "id":1,
    "name":"Doktor",
    "url":"doktor",
    "items":[
       {
          "type":"video",
          "id":1,
          "title":"First tag item",
          "tag_id":1
       },
       {
          "type":"article",
          "id":1,
          "title":"Second tag item - article",
          "tag_id":1
       },
       {
          "type":"article",
          "id":2,
          "title":"Third tag item - article",
          "tag_id":1
       },
       {
          "type":"video",
          "id":2,
          "title":"Fourth tag item",
          "tag_id":1
       }
    ]
 },
 {
    "id":2,
    "name":"Nemocnice",
    "url":"nemocnice"
 },
 {
    "id":3,
    "name":"Sestra",
    "url":"sestra"
     }
  ]
}

我希望它有效或有助于纠正您的代码。