CODEWITHSUNDEEP
ember.jsember-data
dragonremo
dragonremo

Reputation: 41

Ember data nested resources URL

I was working further to develop blog, starting from emberjs.com blog tutorial video. When I try to save comments to serve ember-data rest adapter is posting to http://localhost/blog/comments but it should have been http://localhost/blog//posts/1/comments as it is a nested resource. Below is my code.

var App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    ready: function() {
        this.set('Router.enableLogging', true);
    }
});


App.Router.map(function() {
    this.resource('about');
    this.resource('posts', function() {
        this.resource('post', {
            path: ':post_id'
        });
        this.route('new');
    });
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('posts');
    }
});

App.PostsRoute = Ember.Route.extend({
    model: function() {
        return App.Post.find();
    }
});
App.Comment = DS.Model.extend({
    name: DS.attr('string'),
    email: DS.attr('string'),
    text: DS.attr('string'),
    createdAt: DS.attr('date')
});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    author: DS.attr('string'),
    intro: DS.attr('string'),
    extended: DS.attr('string'),
    publishedAt: DS.attr('date'),
    comments: DS.hasMany('App.Comment', {embedded:'always'})

});



App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.RESTAdapter.extend({
        url: 'http://localhost/blog'
    })
});
App.CommentNewController = Ember.ObjectController.extend({
    needs: ["post"],
    saveComment: function(params) {

        console.log("Dinesh is coding");
        console.log("iname:" + params.iname);
        console.log("text:" + params.text);
        console.log("email:" + params.email);
        //params.set('name', params.iname);
        var post = this.get('controllers.post').get('model');
        debugger;
        var comments = post.get('comments');
        comments.createRecord({
            name:params.iname,
            text:params.text,
            email:params.email,
            post_id:post.get('id')
        });
        //this.get('controllers.comments').pushObject(params);
        this.get('store').commit();


    },
    content: {}
    // }
});

App.CommentNewView = Ember.View.extend({
    template: Ember.Handlebars.compile(comment_new_html)
    // controller: App.CommentController

});

My commentNew view:

<form {{action "saveComment" content  on="submit" validation="true"}}>

<p>{{view Ember.TextField valueBinding="iname" id="iname" placeholder="Name"     required="true"}}<br /></p>
<p>{{view Ember.TextField valueBinding="email" id="email" placeholder="Email" required="true"}}<br /></p>
<p>{{view Ember.TextArea valueBinding="text" id="text" placeholder="Comment" }}</p>
<button type="submit" class="btn">Save Comment</button>
</form>

Did any one encounter similar issue? How do i configure ember-data for nested url?

Upvotes: 0

Views: 2018

Answers (1)

Ian
Ian

Reputation: 336

I had a similar problem and used the following routes:

App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/posts/:post_id' }, function() {
    this.resource('comments', function() {
   this.route('new');
      this.route('create');
    });
    this.route('comment', { path: 'comments/:comment_id'});
  });
});

This gives a route like

/posts/:post_id/comments/:comment_id

More information available from my blog post about ember nested resources with example code

Upvotes: 1

Related Questions