Ember 2: Display a loading message only if the IDs were part of the initial response

Question

Ember 2: Display a loading message only if the IDs were part of the initial response

I frequently use the following code snippet in my projects:

{{#each model.posts as |post|}}

  <div>post.title</div>

{{else}}

  <div>Loading the posts...</div>

{{/each}}

However, I sometimes face uncertainty regarding whether the model.posts array is empty or not.

How can I display a message instead of endlessly loading an empty array?

The issue arises on the /category/2 page, specifically within the category.hbs template where the posts are "sideloaded" in the response structure, like so:

{
  "data": {
    "id": "1",
    "type": "categories",
    "attributes": {
      "name": "Books"
    },
    "relationships": {
      "posts": {
        "data": [{
          "id": "14",
          "type": "posts"
        }, {
          "id": "15",
          "type": "posts"
        }, {
          "id": "20",
          "type": "posts"
        }]
      }
    }
  },
  "included": [{
    "id": "14",
    "type": "posts",
    "attributes": {
      "commented": true,
      "comments": 10
    }
  }, {
    "id": "15",
    "type": "posts",
    "attributes": {
      "commented": false,
      "comments": 10
    }
  }, {
    "id": "20",
    "type": "posts",
    "attributes": {
      "commented": false,
      "comments": 10
    }
  }]
}

I am utilizing ember-data and defining the following models:

category

name: DS.attr('string'),
posts: DS.hasMany('post')

post

commented: DS.attr('string'),
comments: DS.attr('number'),
category: DS.belongsTo('category')

I may consider creating an ember-twiddle to better demonstrate my issue with ember-data...

javascript performance ember.js handlebars.js ember-data

Answer 1

Answer №1

Understanding the Use of 'Links'

Based on the feedback provided, it seems there is some confusion regarding how links operate. The concept itself is quite straightforward. Your payload for the category should adhere to the following structure:

{
  "data": {
    "id": "1",
    "type": "categories",
    "attributes": {
      "name": "Books"
    },
    "relationships": {
      "posts": {
        "links": {
          "related": "/posts?category_id=2"
        }
      }
    }
  }
}

Ember Data will automatically recognize this setup so that when you access the computed property model.posts, it will trigger a request to /posts?category_id=2.

Handling Asynchronous Loading

If you are loading the category and its associated posts in the model() hook of your route, the promise will already be resolved by the time the template is rendered. Therefore, the current implementation of displaying Loading the posts... will only appear if the category has no posts, not while it's still loading. In its present form, it serves little purpose.

To display a loading animation, consider loading the category within a computed property on the controller instead of the model() hook. You can achieve this with code similar to the following:

export default Ember.Controller.extend({
  ...
  category: Ember.computed(
    function() {
      return this.store.query('category', {...});
    }
  ),
  ...
});

You can then check the status of the promise in your template. While we developed an Ember addon called ember-promise-block, I recommend using ember-deferred-content as it receives more frequent updates and offers greater flexibility.

Your template will subsequently resemble the following structure:

{{#deferred-content category as |d|}}
  {{#d.fulfilled}}
    <div>post.title</div>
  {{/d.fulfilled}}

  {{#d.pending}}
    <div>Loading the posts...</div>
  {{/d.pending}}
{{/deferred-content}}

Answer 2

Understanding the Use of 'Links'

Based on the feedback provided, it seems there is some confusion regarding how links operate. The concept itself is quite straightforward. Your payload for the category should adhere to the following structure:

{
  "data": {
    "id": "1",
    "type": "categories",
    "attributes": {
      "name": "Books"
    },
    "relationships": {
      "posts": {
        "links": {
          "related": "/posts?category_id=2"
        }
      }
    }
  }
}

Ember Data will automatically recognize this setup so that when you access the computed property model.posts, it will trigger a request to /posts?category_id=2.

Handling Asynchronous Loading

If you are loading the category and its associated posts in the model() hook of your route, the promise will already be resolved by the time the template is rendered. Therefore, the current implementation of displaying Loading the posts... will only appear if the category has no posts, not while it's still loading. In its present form, it serves little purpose.

To display a loading animation, consider loading the category within a computed property on the controller instead of the model() hook. You can achieve this with code similar to the following:

export default Ember.Controller.extend({
  ...
  category: Ember.computed(
    function() {
      return this.store.query('category', {...});
    }
  ),
  ...
});

You can then check the status of the promise in your template. While we developed an Ember addon called ember-promise-block, I recommend using ember-deferred-content as it receives more frequent updates and offers greater flexibility.

Your template will subsequently resemble the following structure:

{{#deferred-content category as |d|}}
  {{#d.fulfilled}}
    <div>post.title</div>
  {{/d.fulfilled}}

  {{#d.pending}}
    <div>Loading the posts...</div>
  {{/d.pending}}
{{/deferred-content}}

Ember 2: Display a loading message only if the IDs were part of the initial response

Answer №1

Understanding the Use of 'Links'

Handling Asynchronous Loading

Similar questions

The React component fails to inherit any props that are passed to it when it is rendered using a logical operator

What is the best way to increase a numerical input?

What causes the variation in output when utilizing React's setState() function?

Exploring the concept of JavaScript closures and the pitfalls of name clobber

switchMap: Triggering multiple requests simultaneously (2)

Exploring the functionality of the JavaScript Date constructor in relation to

When you click on `window.open('my-app://', '_blank');`, it won't directly open the desktop app from the browser. However, typing `my-app://`

What is the reason that accessing array elements with negative indices is significantly slower compared to accessing elements with

Tips on preventing duplication of APIs when retrieving data using nextjs

Event that signifies a change in the global state of the Angular 2 router

Tips for avoiding problems with quoting and using apostrophes in a JavaScript function inside a tag in a JSP file

Fixing the issue with animated scrolling in React Native's Flatlist component

ReactJS is encountering a situation where two children are using the same key and causing

How to dynamically insert elements into the HTML page using Angular

The elusive cookie in NodeJS remained just out of reach

Is it possible to use AngularJS promises without callbacks?

Send an array to a function with specified criteria

Vue.js navigation guards, restrict access to all unauthorized routes, grant entry to specific routes upon successful authentication

Check for my variable in the redux state before proceeding

Determine the success of an SQL query in Node.js