2012-02-20 1 views
2

관련 모델 저장소에서 데이터를 검색하는 중 멈추었습니다. 달성하고자하는 것에 대한 간단한 개요를 알려주십시오.Sencha Touch 1.xx - 서버 프록시에서 관련 모델로드

퀴즈 목록이 필요하며 퀴즈를 탭하면 질문 목록이 표시됩니다. 질문을 탭하면 연관된 객관식 답을 얻을 수 있습니다 (어쩌면 버튼이나 다른 목록이있는 데이터보기 일 수도 있습니다).

이전 베타 테스트에서는 평면 트리 스토어를 사용하여 퀴즈를 표시했지만 미학에서는 제한적이었으며 내 데이터를 API와 매우 쉽게 동기화 할 수 없었기 때문에 관련 모델을 얻으려고합니다. 대신 일하고있어. 나는 비슷한 문제를 온라인에서 찾지 못했다.

다음은 관련 코드입니다 (MVC 설정에서).

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 :

나는 3 개 관련 모델을 가지고
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 
     ); 
    } 
}); 
,

그리고 마지막으로, 내 나머지 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" 
        }] 
      }] 
    }] 
} 

이 결과 : 이제

"Uncaught Error: You are using a ServerProxy but have not supplied it with a url.".

을 내 QuizModel 필요한 내 REST API에 전달하는 프록시 만이로드가 있습니다 questions()는 기본 프록시를 사용하는 것으로 보입니다. 로드 매개 변수 (url과 필요한 api 키 포함)를 사용하여로드 호출을 구성하려고 시도했지만 작동하지 않습니다. 어떻게해야하는지에 대한 문서를 찾을 수없는 것 같아요. 대부분의 관련 게시물은 localstorage에 대해서만 이야기합니다. 도와주세요!

편집 : 내 질문 목록보기를 추가 :

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?? 
    } 


}); 

당신은 내가 (내가 로그인시 저장소를로드로) 내가 필요한 데이터를 얻을 수 있습니다 볼 수 있습니다,하지만 난을 만드는 방법을 알고하지 않기 때문에 목록은 데이터의 하위 집합을 사용합니다. 업데이트 기능을 사용해 보았지만 많은 일을하지 못했습니다!

+0

내가 가진 문제는 목록이 상점에 묶여 있다고 생각합니다. 내가 원하는 것을 목록에 표시 할 수없는 이유는 무엇입니까? 단일 저장소 사용에 대한 나의 옵션은 무엇입니까? – Burnzoire

+0

로그인 한 학생의 모든 quizes, 질문 및 답변을 상점에 별도로로드 한 다음 퀴즈/질문을 선택했는지 여부에 따라 각 상점에 필터를 사용하도록 REST API를 재정렬했습니다. 큰 변화가 있지만 지금까지 효과가 있습니다! – Burnzoire

+0

실제로이 3 개의 개별 상점에서 외래 키가 0으로오고 있으므로 내 필터가 작동하지 않습니다. grrrrrrrr – Burnzoire

답변

1

이제 모든 것을 수행하기 위해 하나의 중첩 된 저장소를 얻지 않고 별도의 저장소를 사용하여 올바르게 작동하는 퀴즈를 만들었습니다. 이렇게하려면 내 서버가 외래 키가 설정된 JSON 모델을 적절히 설정해야합니다. 내 모델 & 저장의 예 :

app.models.Quiz = Ext.regModel("Quiz", { 
    fields: [ 
     { name: 'id', type: 'int' }, 
     { name: 'studentid', type: 'int' }, 
     { name: 'dateAllocated', type: 'string' }, 
     { name: 'category', type: 'string' }, 
    ], 

    associations: [ 
    {type: 'hasMany', model: 'Question', 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', 
      id: 'id' 
     } 
    } 

}); 

app.stores.QuizStore = new Ext.data.Store({ 
    model: "Quiz", 
    storeId: 'quizStore' 
}); 

및 질문 모델은 quiz_id에 대한 필드주의 :

app.models.Question = Ext.regModel("Question", { 
    fields: [ 
     { name: 'id', type: 'int' }, 
     { name: 'quiz_id', type: 'int'}, 
     { name: 'prompt', type: 'string' }, 
     { name: 'level', type: 'int' }, 
     { name: 'category', type: 'string' } 
    ], 
    associations: [ 
     {type: 'hasMany', model: 'Answer', name: 'answers'}, 
     {type: 'belongsTo', model: 'Quiz'} 
    ], 

    proxy: { 
     type: 'rest', 
     actionMethods: {create: "POST", read: "POST", update: "PUT", destroy: "DELETE"}, 
     url: 'http://localhost/bm/core/api/questions', 
     reader: { 
      type: 'json', 
      root: 'questions', 
      id: 'id' 
     } 
    } 
}); 

app.stores.QuestionStore = new Ext.data.Store({ 
    model: "Question", 
    storeId: 'questionStore' 
}); 

이 설정은 저를 필터링 할 수 있습니다 각 점포 (목록)에 대해 별도의 뷰를 가질 수 선택에 따라. 내 API는 로그인 한 사용자에 대해서만 quizes/questions/answers를로드하므로 로그인시 너무 많이로드되지 않습니다.컨트롤러에서 특정 목록의 가게를 필터링

예 :

showQuiz: function(options){ 
    //id passed from List's itemTap event 
     var currentQuiz = app.stores.QuizStore.getById(options.id); 

     app.stores.QuestionStore.clearFilter(); 
     //filter questions by selected quiz 
     app.stores.QuestionStore.filter({ 
      property: 'quiz_id', 
      value: options.id, 
      exactMatch: true 
     }); 

     //pass quiz record for setting toolbar title etc 
     app.views.questionList.updateWithRecord(currentQuiz); 

     app.views.quiz.setActiveItem(
      app.views.questionList, options.animation 
     ); 

    } 

희망이 사람이 같은 문제로 실행하는 데 도움이!