Ember-data embedded records handling


#1

Hi!

I’m fairly new to Ember.js and trying to write a quiz app using REST Adapter.

My enviroment: Ember: 1.4.0-beta.6, Ember-data 1.0.0-beta.7+canary Jquery 2.1, Handlebars 1.3,

Basically I have questions which are stored in mongoDB and have a number of answer associated with them. I chose to embed the answers inside questions (which seems like a good idea to me).

My json records look something like this:

{
    questions: [
    {
      position: 1,
      title: "What is the capital of Honduras?",
      quiz_id: "52471342445565e74600000a",
      updatedAt: "2014-02-09T08:22:17.706Z",
      id: "527416e4143fa70000000005",
      anwers : [
         { title: "Tegucigalpa", position: 1, score: 1, id: 1},
         { title: "Managua", position: 2, score: 0, id: 2},
         { title: "Tegucigalpa", position: 3, score: 0, id: 3}
      ]
     }, ...
    ]
}

Models:

App.Question = DS.Model.extend({
    title: DS.attr('string'),
    quiz_id: DS.attr('string'),
    position: DS.attr('number'),
    answers: DS.hasMany('answer', {embedded:'always'})
});

App.Answer = DS.Model.extend({
     title: DS.attr('string'),
     position: DS.attr('number'),
     score: DS.attr('number')
});

To be able to use embedded records I found out that I should be using DS.EmbeddedRecordsMixin. So I did:

App.QuestionSerializer = DS.ActiveModelSerializer.extend(
	DS.EmbeddedRecordsMixin, {
		attrs: {
			answers: {embedded: 'always'}
		}
	} 
);

Everything works fine up to this point. I can even reorder my questions, delete them etc… I’m able to see associated answers with each question using {{#each model.answers}} loop below each question after the page is loaded.

Trouble comes when I try to make changes and manipulate answers. For instance when I add new answer to question it briefly appears in the view and then disappears. I tracked it down to save() method on question, which does return a complete record after the save(), but it does not render correctly in the view.

Anyway my question is: how to a come about manipulating and managing embedded data? Do I need to extract them from JSON? Do I need to create separate controllers and templates sticking to Ember.js rules? After reading the forum I have a feeling I need to implement extractSingle: function(store, type, payload, id, requestType) somewhere along the way on my App.QuestionSerializer to handle my data correctly, but I’m not sure how and what it should look like.

Can anyone point me to the right direction. Maybe provide a few links to some apps using similar data structure? Or maybe there are some tutorials out there I can follow to understand this in more detail? I really like Ember.js, and although the website’s documentation is constantly improving there are very few world examples that go beyond simple todo app or contacts manager.