使用Ember中的控制器存储用户对问卷的回复

时间:2013-07-14 12:12:50

标签: ember.js

我正在使用Ember创建一个探查器应用程序(就像您有时会在杂志中获得的个性测验之一)。它提出了一系列10个问题,每个问题有7个多项选择答案,每个答案都有不同的分配分数。每个响应都会加到100分中。用户最终可以存储他们的答案,这样他们就可以在以后重做它,看看它们是否有所改进。

但是对Ember来说(非常)是新的,我一直坚持收集并存储用户的回复作为个人记录。

我的问题是我使用一个QuestionsController来加载一个Fixture(Question)的问题,以及它可能的Answer(一个单独的相关Fixture)。

所以,当有人点击答案时(例如,使用按钮,但是当我绕过它时,我可能会使用单选按钮),它正在捕捉他们的响应...但是接下来我该怎么做?

我认为最好的方法是创建一个单独的ResponseController来创建各个响应的记录(我可以总计),但Ember希望捕获的响应由QuestionsController处理,而不是ResponseController(这是什么)我认为应该这样做。)

我似乎无法理解如何做到这一点,特别是Ember的所有不同部分如何组合在一起并在控制器之间进行交互。

Javascript

// Models

App.Question = DS.Model.extend ({
label: DS.attr('string'),
    answers: DS.hasMany('App.Answer')
    });

App.Answer = DS.Model.extend ({
    question: DS.belongsTo('App.Question'),
    label: DS.attr('string'),
    value: DS.attr('number')
});

App.Response = DS.Model.extend ( {
    question:   DS.attr('string'),          // Question_id that was responded to
    score:      DS.attr('number'),          // The score of the selected answer
    answer:     DS.belongsTo('App.Answer')  // The answer 
    });

// Controllers

App.QuestionsController = Ember.ArrayController.extend( {

    select: function( question, score, answer ) {      

    // this next bit is clearly not right, but I don't know why...
        App.Response.storeResponse( question, score, answer );


    }
});

App.ResponseController = Ember.ObjectController.extend( { 

    storeResponse: function( question, score, answer ) {

    // this next bit is clearly not right, but I don't know why.
        createRecord ( { question: question, score: score, answer: answer  } ); 
    }
});

HTML

<!-- The Template for the Questionnaire -->

<script type="text/x-handlebars" id='questions'>
<H2>Questions</H2>
{{#each question in controller}}
    <div><span>{{question.id}}</span> {{question.label}}</div>
    <div>{{partial "answer"}}</div>
{{/each}}
</script>

<!-- The Template for the Answers -->

<script type="text/x-handlebars" id='_answer'>
<ul>
{{#each answer in question.answers}}
    <li><button {{ action "select" question.id answer.value answer.id }}{{answer.label}}</li></button></li>
{{/each}}
</ul>
</script>

进度

我的模板工作正常;它正确显示问题和答案(或至少如我所料)。该按钮正在捕获正确的响应。但我真的不知道如何将数据从那里存入存储。

我在控制台中收到的回复(取决于我的解决方案)从“未定义”变为“找不到变量storeResponse”。

1 个答案:

答案 0 :(得分:4)

您可以使用needs api跨控制器进行通信。例如,您可以声明QuestionController needs访问ResponseController

needs: ['response'],
responseBinding: 'controllers.response',

然后,Ember会将响应控制器实例注入QuestionController this.get('response'),可以使用select进行访问。然后,您的storeResponse操作处理程序可以在其上调用select: function( question, score, answer ) { var controller = this.get('response'); controller.storeResponse(question, score, answer); }

{{1}}