Search code examples
ember.jsember-cliwp-api

Ember CLI / resource / wp-api slug


For practice, and because the word 'post' is too confusing these days, I'm creating a resource called thought(s) - I'm getting some wp-json with the WordPress API (so the 'posts' are 'thoughts') - I'm setting the path to /wordpress with the intention of getting urls like this: http:/site.com/wordpress/thought-slug - I'm nesting the resources, so that the path is relative to the parent.

What I don't understand is how I know what the 'dynamic' : part is - and how I choose it. In the tutorials I've found, it's always post_id or something, but the specifics aren't explained.

I have a thoughts.js with {{#link-to 'thought'}}go{{/link-to}}, and a thought.js - and I've done this in the tutorials, so I'm just missing an understanding of how that dynamic part works...

Help :/


router.js

Router.map(function() {

  // WordPress
  this.resource('thoughts', {
    path: '/wordpress' },
    function() {
      this.resource('thought', {
        path: ':thought???'
      });
    }
  );

});

export default Router;

Solution

  • I don't have enough rep to comment, but I think I can guess what is happening...

    Where you have your link-to helper - in your thoughts.hbs -- I think you need a this, so

    {{#link-to 'thought' this }}

    Would have a this to refer to it's self.


    The other part, about what to put as the dynamic part, I'm fairly sure that you can put anything that is in the root of what you're getting at in the json object.

    • _result: Array[7]
      • 0: Object
        • ID: "1"
        • slug: "your-post-slug"

    (I don't really nest my routes yet... still learning - )

    But you can write it like this... (router.js) - and I think you can use ID, or slug or anything really - but I guess it would have to be unique... : {

      this.resource('thoughts', {
        path: '/wordpress'
      });
    
      this.resource('thought', {
        path: '/wordpress/:slug'
      });