Is Ember the ideal spot for shared ownership?

Question

Is Ember the ideal spot for shared ownership?

Currently, I am developing a hybrid app that involves server processing and using Ember for the main UI implementation.

All authentication functionalities are handled on the server side, so upon page load, the user's authentication status is already determined based on cookies.

In essence, on the client-side, there exists a userId cookie, which signifies whether the user is authenticated or not.

Now, the challenge lies in making this data accessible to all templates within the application.

I managed to resolve this issue for the application template through the following code snippet (implemented in CoffeeScript):

Route:

ApplicationRoute = Ember.Route.extend
  setupController: (controller) ->
    userId = jQuery.cookie 'userId'
    if userId == 'undefined'
      userId = null
    else
      userId = parseInt userId, 10
    controller.set 'userId', userId

Controller:

ApplicationController = Ember.Controller.extend
  userId: null

Finally, the template:

<strong>
  {{#if userId}}
    userId: {{userI	}}
  {{else}}
    No user
  {{/if}}
</strong>

While this solution works seamlessly from the application template, any attempt to move it to another template like the index results in displaying 'no user' (indicating issues with controller chaining).

I also experimented with converting it into a bound helper but encountered difficulties as the helper failed to execute at all:

Ember.Handlebars.registerBoundHelper 'userId', ->
  userId = jQuery.cookie 'userId'
  if userId == 'undefined'
    userId = null
  else
    userId = parseInt userId, 10
  userId

javascript ember.js

Answer 1

Answer №1

When faced with a situation where I needed to handle asynchronous setup logic before initializing my Ember application, I found that using App.deferReadiness() and App.advanceReadiness(), along with setting global properties directly on the App object, was the most effective solution.

The Ember API documentation for deferReadiness() states:

This method can be used to delay the readiness of the application until a certain condition is met.

For instance:
   App = Ember.Application.create();
   App.deferReadiness();

   jQuery.getJSON("/auth-token", function(token) {
     App.token = token;
     App.advanceReadiness();
   });
By employing this technique, you can execute asynchronous setup tasks and postpone the initialization of your application until these tasks are completed.

One practical example involves retrieving the user's ID from a cookie prior to launching Ember, and storing it in App.currentUser:

App = Ember.Application.create({});

App.deferReadiness();

var userId = "1234";//jQuery.cookie 'userId'
if (userId == 'undefined') {
  userId = null;
  App.set('currentUserLoggedIn', false);
  //window.location = "/login"; // redirect to login page
} else {
  userId = parseInt(userId, 10);
  App.set('currentUserLoggedIn', true);
  App.set('currentUser', userId);
  App.advanceReadiness();
}

This value can then be accessed throughout the application using:

App.get('currentUser');

or in templates:

{{App.currentUser}}

Check out this JSBin example for further clarification.

Answer 2

When faced with a situation where I needed to handle asynchronous setup logic before initializing my Ember application, I found that using App.deferReadiness() and App.advanceReadiness(), along with setting global properties directly on the App object, was the most effective solution.

The Ember API documentation for deferReadiness() states:

This method can be used to delay the readiness of the application until a certain condition is met.

For instance:
   App = Ember.Application.create();
   App.deferReadiness();

   jQuery.getJSON("/auth-token", function(token) {
     App.token = token;
     App.advanceReadiness();
   });
By employing this technique, you can execute asynchronous setup tasks and postpone the initialization of your application until these tasks are completed.

One practical example involves retrieving the user's ID from a cookie prior to launching Ember, and storing it in App.currentUser:

App = Ember.Application.create({});

App.deferReadiness();

var userId = "1234";//jQuery.cookie 'userId'
if (userId == 'undefined') {
  userId = null;
  App.set('currentUserLoggedIn', false);
  //window.location = "/login"; // redirect to login page
} else {
  userId = parseInt(userId, 10);
  App.set('currentUserLoggedIn', true);
  App.set('currentUser', userId);
  App.advanceReadiness();
}

This value can then be accessed throughout the application using:

App.get('currentUser');

or in templates:

{{App.currentUser}}

Check out this JSBin example for further clarification.

Is Ember the ideal spot for shared ownership?

Answer №1

Similar questions

Angular will move the input field cursor to the beginning after typing 4 digits

Displaying a dropdown selection that showcases two object properties lined up side by side

Using AJAX to pass the ID name when clicking in PHP

Is there a way to terminate an ongoing axios request?

The Flask AJAX request is returning an empty ImmutableMultiDict, whereas the same AJAX request successfully works with http.server

The user's display name in Firebase is currently empty

What could be the root cause behind this Selenium mistake?

Utilize Javascript to interpret a structure that resembles JSON

Filtering multiple rows in a table using Javascript

Discovering dependencies for the Tabulator library can be achieved by following these

Is the ngShow directive dependent on the parent variable in any way?

contentScript encountering CORS problem while using $.ajax()

What is the best method for transmitting data to HTML using Node.js?

Steps to configure caching settings to ensure no caching for the entire site during specific hours, and constant no-cache policy for a particular page

Automate the population of input fields

How to align two <select> elements side by side using Bootstrap

Is there a way to access fields from an associated model within React components?

Is it possible to wait for two asynchronous actions using only one await statement?

Node Js issue stemming from unaddressed promises leading to rejection

Scroll bar in Highstock does not completely cover the entire length when dealing with multiple series