javascript - Sencha Touch：从嵌套的 JSON 中显示另一个列表

Question

我有 JSON 包含另一个 JSON。需要在问题列表中显示答案列表

示例我现在想看到的内容：

问题1+2=？

答案

-1

-5

-3 ....

现在只显示 JSON 答案的第一个答案

我的 JSON

[
    {
        "id": 7,
        "answers": [
            {
                "id": 6,
                "answer": "1",
                "isCorrect": false
            },
            {
                "id": 7,
                "answer": "5",
                "isCorrect": false
            },
            {
                "id": 5,
                "answer": "3",
                "isCorrect": true
            }
        ],
        "question": "1+2=?"
    },
    {
        "id": 14,
        "answers": [
            {
                "id": 28,
                "answer": "5",
                "isCorrect": false
            },
            {
                "id": 31,
                "answer": "7",
                "isCorrect": true
            },
            {
                "id": 29,
                "answer": "2",
                "isCorrect": false
            },
            {
                "id": 30,
                "answer": "6",
                "isCorrect": false
            }
        ],
        "question": "2+5=?"
    },
    {
        "id": 9,
        "answers": [
            {
                "id": 13,
                "answer": "3",
                "isCorrect": false
            },
            {
                "id": 11,
                "answer": "5",
                "isCorrect": false
            },
            {
                "id": 14,
                "answer": "6",
                "isCorrect": true
            },
            {
                "id": 12,
                "answer": "7",
                "isCorrect": false
            }
        ],
        "question": "3+3=?"
    }
]

我的模型和观点

Ext.define('Sencha.model.Question', {
    extend: 'Ext.data.Model',

    requires: ['Sencha.model.Answer'],

    config: {
        fields: [
            'question'
        ],

        proxy: {
            type: 'ajax',
            url: 'contacts.json',
            reader : {
                type : 'json'
            }
        },


        hasMany: {
            model: "Sencha.model.Answer",
            associationKey: 'answers'
        }
    }
});

Ext.define('Sencha.model.Answer', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'answer'
        ],

        belongsTo: "Sencha.model.Question"
    }
});

Ext.define('Sencha.view.Questions', {
    extend: 'Ext.List',
    xtype: 'questions',

    config: {
        title: 'Stores',
        cls: 'x-questions',

        store: 'Questions',
        itemTpl:[
            '{question}',
            '<div>',
                '<h2><b>Answers</b></h2>',
                '<tpl for="answers">',
                    '<div> - {answer}</div>',
                '</tpl>',
            '</div>'
        ].join('')
    }
});
Ext.define('Sencha.view.Answer', {
    extend: 'Ext.List',
    xtype: 'answer',

    config: {
        title: 'Answer',
        cls: 'x-questions',

        store: 'Questions',
        itemTpl: [
        '<div>{answer}</div>'
        ].join('')
    }
});

谢谢！

Answer 1

解决方案，不是最终的，但解决了我的问题

Ext.define('Sencha.model.Question', {
     extend: 'Ext.data.Model',  //
    requires: ['Sencha.model.Answer'],
      config: {
         fields: [
             'id', 'questionid', 'answers', 'question'
         ],
          proxy: { 
            type: 'ajax',
             url: 'contacts.json',
             reader : {
                 type : 'json'
             }
         } 
    }
 }); 

Ext.define('Sencha.view.Questions', {
    extend: 'Ext.List',
    xtype: 'questions',

    config: {
        title: 'Stores',
        cls: 'x-questions',

        store: 'Questions',
        itemTpl: new Ext.XTemplate(
            '<div class="question">{question}</div>',
            //'{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
            '{[this.getAnswers(values.answers, values.id, values)]}',
            {
                getAnswers: function (answers,id, values) {  //  <===== Method
                    var returnString='';
                    console.dir(values);
                    Ext.each(answers, function(answer){
                             returnString += '<input type="radio" name="' + id + '" value="0">' + answer.answer + '<br>';
                             //console.log(returnString);
                     });
                    return returnString;
                 }
            }
        )
    }
});