Search code examples
authenticationember.jsmodelfavorite

How would I create a list of posts which can be added to the user's favorites?


I'm pretty new to this whole Ember thing, and I'm really hungry for more example code for real-world scenarios. I've seen the Embercast about authentication and that was helpful, but I'm trying to create an app which has a list of posts owned by various users, which other users can add to their favourites.

It's ambitious for my current level, for sure, but I was hoping someone here might be able to point me to an example or even create one. I think something like this would be an excellent resource for others — more so than the Todo list example in the Ember guide, which really doesn't far enough to showing how I'd create a real application. We need more examples with authentication, I think.

Here're my models and fixtures so far:

App.User = DS.Model.extend({
    name: DS.attr('string'),
    email: DS.attr('string'),
    posts: DS.hasMany('post'),
    favourites: DS.hasMany('favourite')
});
App.User.FIXTURES = [{
    id: 1,
    name: 'Bob Jones',
    email: '[email protected]',
    favourites: [2]
}];

App.Post = DS.Model.extend({
    date_posted: DS.attr('date'),
    title: DS.attr('string'),
    description: DS.attr('description'),
    comments: DS.hasMany('comment'),
});
App.Post.FIXTURES = [{
    id: 1,
    date_posted: new Date,
    title: 'Red',
    description: 'Great colour'
    comments: []
}, {
    id: 2,
    date_posted: new Date,
    title: 'Blue',
    description: 'Makes me sad',
    comments: [1]
}];

App.Comment = DS.Model.extend({
    post: DS.belongsTo('post'),
    date_posted: DS.attr('date'),
    author: DS.attr('string'),
    message: DS.attr('string'),
});
App.Comment.FIXTURES = [{
    id: 1,
    post: [2],
    date_posted: new Date,
    author: 'Aaron',
    message: 'I agree with the description.'
}];

App.Favourite = DS.Model.extend({
    user: DS.belongsTo('user'),
    post: DS.belongsTo('post')
});
App.Favourite.FIXTURES = [{
    user: 1,
    post: 2
}];

I feel like this is the easy part, and I'm not even 100% confident these are correctly put together.

Thanks for any guidance with this!


Solution

  • There are a couple of issues you're going to have here. Firstly you are using fixtures, so you should be using the FixtureAdapter. And since you have relationships defined in your fixture data, but the data only has an id, you're going to need to mark those relationships as async. Additionally in your user fixture it has a favourite id 2, but your favourite fixtures don't have ids.

    App.User = DS.Model.extend({
        name: DS.attr('string'),
        email: DS.attr('string'),
        posts: DS.hasMany('post', {async:true}),
        favourites: DS.hasMany('favourite', {async:true})
    });
    App.User.FIXTURES = [{
        id: 1,
        name: 'Bob Jones',
        email: '[email protected]',
        favourites: [2],
        // you have no posts defined here??
    }];
    
    App.Post = DS.Model.extend({
        date_posted: DS.attr('date'),
        title: DS.attr('string'),
        description: DS.attr('description'),
        comments: DS.hasMany('comment', {async:true}),
    });
    App.Post.FIXTURES = [{
        id: 1,
        date_posted: new Date,
        title: 'Red',
        description: 'Great colour', // also missing this comma
        comments: []
    }, {
        id: 2,
        date_posted: new Date,
        title: 'Blue',
        description: 'Makes me sad',
        comments: [1]
    }];
    
    App.Comment = DS.Model.extend({
        post: DS.belongsTo('post', {async:true}),
        date_posted: DS.attr('date'),
        author: DS.attr('string'),
        message: DS.attr('string'),
    });
    App.Comment.FIXTURES = [{
        id: 1,
        post: [2],
        date_posted: new Date,
        author: 'Aaron',
        message: 'I agree with the description.'
    }];
    
    App.Favourite = DS.Model.extend({
        user: DS.belongsTo('user', {async:true}),
        post: DS.belongsTo('post', {async:true})
    });
    App.Favourite.FIXTURES = [{
        id: 2, // it needs some sort of unique identifier
        user: 1,
        post: 2
    }];
    

    Additionally you may want to read the Ember Data transition documentation which may help with some of your questions, https://github.com/emberjs/data/blob/master/TRANSITION.md

    Here's a small example I made with your data, http://emberjs.jsbin.com/OxIDiVU/204/edit