【发布时间】：2012-03-10 11:17:44
【问题描述】：
我一直在尝试从关联的模型存储中检索数据。请允许我简要概述一下我正在努力实现的目标。
我需要一个测验列表，点击测验后它会显示一个问题列表。点击问题后，您将获得相关的多项选择答案（可能是带有按钮的数据视图或其他列表）。
在较早的测试版中，我使用平面树存储来显示测验，但这在美学方面受到限制，并且不允许我很容易地将我的数据与 api 同步，因此我试图让相关模型工作反而。我在网上发现了类似的问题，并不能完全得到我想要的。
这是相关代码（在 MVC 设置中）。我有 3 个关联模型：
QuizModel.js：
app.models.QuizModel = Ext.regModel("QuizModel", {
fields: [
{ name: 'id', type: 'int' },
{ name: 'studentid', type: 'int' },
{ name: 'dateAllocated', type: 'string' },
{ name: 'category', type: 'string' },
],
associations: [
{type: 'hasMany', model: 'QuestionModel', name: 'questions'},
],
proxy: {
type: 'rest',
actionMethods: {create: "POST", read: "POST", update: "PUT", destroy: "DELETE"},
url: 'http://localhost/bm/core/api/quiz',
reader: {
type: 'json',
root: 'quizes'
}
}
});
app.stores.QuizStore = new Ext.data.Store({
model: "QuizModel",
storeId: 'quizStore'
});
QuestionModel.js：
app.models.QuestionModel = Ext.regModel("QuestionModel", {
fields: [
{ name: 'id', type: 'int' },
{ name: 'quizmodel_id', type: 'int'},
{ name: 'prompt', type: 'string' },
{ name: 'level', type: 'int' },
{ name: 'categoty', type: 'string' }
],
associations: [
{type: 'hasMany', model: 'AnswerModel', name: 'answers'},
{type: 'belongsTo', model: 'QuizModel'}
]
});
AnswerModel.js：
app.models.AnswerModel = Ext.regModel("AnswerModel", {
fields: [
{ name: 'id', type: 'int' },
{ name: 'questionmodel_id', type: 'int' },
{ name: 'prompt', type: 'string' },
{ name: 'correct', type: 'string' }
],
associations: [
{type: 'belongsTo', model: 'QuestionModel'}
]
});
QuizController.js：
app.controllers.QuizController = new Ext.Controller({
index: function(options) {
console.log('home');
},
quizTap: function(options){
var currentQuiz = app.stores.QuizStore.getAt(options.index);
var questions = currentQuiz.questions().load().getAt(0);
app.views.questionList.updateWithRecord(questions);
app.views.viewport.setActiveItem(
app.views.questionList, options.animation
);
}
});
最后，我的 REST API 响应如下所示：
{
"status" : true,
"quizes" : [{
"id" : "1",
"category" : "Privacy",
"date_allocated" : "1329363878",
"questions" : [{
"id" : "1",
"prompt" : "Lorem ipsum dolor sit amet?",
"answers" : [{
"id" : "1",
"correct" : "1",
"prompt" : "yes"
},
{
"id" : "2",
"correct" : "0",
"prompt" : "no"
}]
}]
}]
}
这会导致：
“未捕获的错误：您正在使用 ServerProxy，但尚未为其提供 url。”。
现在我的 QuizModel 具有与我的 REST API 通信所需的代理，但从 questions() 加载似乎使用了默认代理。我尝试使用所需参数（包括 url 和必要的 api 密钥）配置加载调用，但这似乎不起作用。我似乎找不到任何关于我应该如何执行此操作的文档，并且大多数相关帖子仅讨论本地存储。请帮忙！
编辑：添加我的问题列表视图：
BuddeMobile.views.QuestionList = Ext.extend(Ext.Panel, {
title: 'Quiz',
iconCls: 'quiz',
cls: 'question',
scroll: 'vertical',
initComponent: function(){
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
title: 'Quiz'
}],
items: [{
xtype: 'list',
itemTpl: '<div class="quiz-question">{prompt}</div>',
store: 'quizStore',
listeners: {
itemtap: function (list, index, el, e){
console.log('question tap',el);
}
}
}]
});
BuddeMobile.views.QuestionList.superclass.initComponent.call(this, arguments);
},
updateWithRecord: function(record) {
var toolbar = this.getDockedItems()[0];
toolbar.setTitle(record.get('category')); //works
var list = this.items.get(0);
console.log(record.questions()); //prints out mixed collection of questions
var question1 = record.questions().getAt(0); //testing
console.log(question1.answers()); //prints out mixed collection for first question's answers
list.update(record.questions()); //does not work. How can I populate the list??
}
});
如您所见，我可以获得所需的数据（因为我在登录时加载商店），但我不知道如何使列表使用数据子集。我已经尝试过更新功能，但这并没有做很多！
【问题讨论】：
-
我认为我遇到的问题是列表绑定到商店。为什么我不能有一个列表显示我想要的？我在这里使用单一商店有哪些选择？
-
我重新安排了我的 REST API 以将登录学生的所有测验、问题和答案加载到单独的商店，然后根据选择的测验/问题为每个商店使用过滤器。很大的变化，但到目前为止它已经奏效了！
-
实际上，现在有了这 3 个独立的商店，我的外键将变为 0，因此我的过滤器将不起作用。呸呸呸
标签： model proxy extjs store model-associations