A guide on configuring multiple controllers within a single route in ember.js

Question

A guide on configuring multiple controllers within a single route in ember.js

I am new to working with ember.js and currently dealing with two models - User and Role

App.User = DS.Model.extend({
    name: DS.attr('string'),
    roles: DS.hasMany('role')
});

App.Role = DS.Model.extend({
    name: DS.attr('string')
});

My goal is to assign or remove roles for a specific user in my application. To achieve this, I need to compare the roles associated with the user against all available roles by looping through and comparing two controllers.

When displaying the assigned roles to a user in the user/edit template, I use the following code:

Assigned Roles: {{#each role in roles}}*{{role.name}}{{/each}}

However, I also need a RolesController in the same route that will display all available roles regardless of the user. Setting up this controller in UserEditRoute may cause conflicts due to naming conventions.

The objective is to list all roles with checkboxes, where the roles assigned to the user are pre-checked and others remain unchecked.

Check out this jsfiddle link

javascript ember.js

Answer 1

Answer №1

If you want to instruct Ember on how to connect the User controller with the roles controller, you can utilize the needs property in the UsersEditController.

Make sure to specify the model for this controller by implementing the setupController hook within the UsersEditRoute. This way, you can display your list of roles.

App.UsersEditRoute = Ember.Route.extend({
  setupController: function(controller,model) {
        controller.set('model', model);//UsersEditController
        this.controllerFor('roles').set('model',this.store.find('role'));
  }
});

Controllers

App.UsersEditController = Em.ObjectController.extend({
    needs: "roles",
    rolesController: Ember.computed.alias("controllers.roles")
});
App.RolesController = Em.ArrayController.extend({});

Lastly, here's the template:

  <script type="text/x-handlebars" data-template-name="users/edit">
    <h3>User Edit</h3>
      <p>Name: {{name}}</p>
      <p>Assigned Roles: {{#each userRole in roles}}&nbsp;*{{userRole.name}}{{/each}}</p>
      <p>Available Roles:{{#each role in rolesController}}&nbsp;*{{role.name}}{{/each}}</p>
  </script>

Check out the code on jsfiddle here

Answer 2

If you want to instruct Ember on how to connect the User controller with the roles controller, you can utilize the needs property in the UsersEditController.

Make sure to specify the model for this controller by implementing the setupController hook within the UsersEditRoute. This way, you can display your list of roles.

App.UsersEditRoute = Ember.Route.extend({
  setupController: function(controller,model) {
        controller.set('model', model);//UsersEditController
        this.controllerFor('roles').set('model',this.store.find('role'));
  }
});

Controllers

App.UsersEditController = Em.ObjectController.extend({
    needs: "roles",
    rolesController: Ember.computed.alias("controllers.roles")
});
App.RolesController = Em.ArrayController.extend({});

Lastly, here's the template:

  <script type="text/x-handlebars" data-template-name="users/edit">
    <h3>User Edit</h3>
      <p>Name: {{name}}</p>
      <p>Assigned Roles: {{#each userRole in roles}}&nbsp;*{{userRole.name}}{{/each}}</p>
      <p>Available Roles:{{#each role in rolesController}}&nbsp;*{{role.name}}{{/each}}</p>
  </script>

Check out the code on jsfiddle here

A guide on configuring multiple controllers within a single route in ember.js

Answer №1

Similar questions

stop automatic resizing of windows

Organize an array of objects based on another array in JavaScript

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

One way to display GIFs sequentially without preloading them is by using JavaScript

Should I use an array literal or split a string?

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

Is there a way to prevent a button from being clicked until a certain callback function is triggered

What is the method for retrieving the active element with Waypoint?

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

The GET request for a "places" endpoint in a node js application is experiencing issues

Modifying the onclick function for a bootstrap glyphicon

Creating a recursive function using NodeJS

Implement the switch case statement within a node.js application

Javascript navigating through the User control

Invoking a function of a Redux-form React component

I'm having trouble getting the animation to work with jQuery. Despite trying everything, the animation doesn't seem to respond to any button clicks

How can we enable Material UI tooltip based on certain conditions?

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting

Creating a highly innovative server infrastructure tailored for Dojo applications with exceptional features

Enhance the original array of a recursive treeview in VueJS