Ember Picker - designate target for chosen item

I am interested in creating a dropdown menu that can be filled with values from my model.

App.CoursesRoute = Ember.Route.extend({

  model: function() {
      return Ember.RSVP.hash({
          mathcourses: this.store.find('mathcourse'),
          quickmathunits: this.store.find('quickmathunit'),
          cscourses: this.store.find('cscourse'),
          quickcsunits: this.store.find('quickcsunit'),
      })
  }

});


App.Mathcourse = DS.Model.extend({

    title: DS.attr('string'),

});

App.Mathcourse.FIXTURES = [
{id: 1,  title:'Algebra', math: true},
{id: 2,  title:'Geometry', math: false},
{id: 3,  title:'Algebra 2'},
{id: 4,  title:'Statistics'},
{id: 5, title:'Pre-Calculus'},
]

This code snippet is part of the index.html file.

{{view Ember.Select
content= mathcourses
optionValuePath="content.id"
optionLabelPath="content.title"}}

This piece of code belongs to app.js file.

Can anyone guide me on what code needs to be added to make the dropdown selection work as intended? The list displays properly but I am unsure how to use the IDs for link-to functionality when a value is chosen. I want it to act like a menu to switch between different subpages.

Answer №1

To set the selection to a variable within the controller, follow these steps:

{{view Ember.Select
content= courseList
optionValuePath="content.id"
optionLabelPath="content.title"
value=selected}}

Next, create a computed property that observes the selected variable and use it to redirect as needed.

Controller:

selected: '',

RedirectProperty: function(){
  //REDIRECT HERE
}.observes('selected'),

For more information on redirection in Ember.js routing, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Coordinates in a 3D space following a rotation

I have two specific points, C and P. My goal is to rotate point P around center C in three dimensions. How can I determine the new coordinates of point P after rotation? I am provided with two angles: 'yaw' and 'pitch'. The 'ya ...

TypeORM findManyToOne queries results in excessive and redundant query execution

I am currently working with a database table design structured as follows: Table Appointments: id| start_time| patientId |.. and other fields | And another table known as the Patient table: id| name | last_name | .. along with other fields | In my app ...

Prevent the execution of Javascript in textarea fields

In my web application, I have a textarea where users can input any text that is saved as a string in the database. The issue arises when users enter Javascript code into the textarea, as it will execute when viewed on the saved data page. Is there a univ ...

React Three Fiber encountered an unexpected JSON token 'c' at position 3

I am encountering an issue while trying to load a .glb file using react-three-fiber. The error I'm receiving is as follows: Error Unexpected token c in JSON at position 3 I can't seem to figure out what mistake I am making - it seems that the co ...

The Bootstrap 4 Carousel experiences flickering issues during transitions when viewed on Safari browser

After integrating a Bootstrap 4 carousel onto a Drupal platform, I encountered a peculiar issue. The carousel functions smoothly on Chrome, but on Safari, it briefly blinks before transitioning to the next slide (as per the set interval time). Initially, I ...

Unable to dismiss my DIALOG component using onClick in REACT

Hey there! I'm feeling a bit frustrated trying to work with the DIALOG component in Material UI. My goal is to make a simple DIALOG component appear when I click on a bin Icon from the MUI library. Here's what I've tried so far: Setting ...

Regular expression to limit a string to a maximum of 5 consecutive numeric characters and a total of up to 8 numeric characters

I need help creating a regex pattern that limits a string to no more than 5 consecutive numeric characters and a total of 8 numeric characters. Here are some examples: 12345 => True Yograj => True Yograj1234 ...

The submit button remains disabled despite completing all required fields

https://jsfiddle.net/xrxjoaqe/ I'm encountering an issue with the bootstrap inline validation files. Despite filling in all the required fields, the submit button remains disabled. $('#registerbutton').attr('disabled', 'di ...

JavaScript encountered an abrupt cessation of input, catching us off guard

Can someone please help me identify the issue with the JavaScript code below? I encountered an error message stating "Unexpected end of input", but upon reviewing the code, I couldn't find any apparent errors. All my statements seem to be properly ter ...

I'm experiencing difficulties in installing dependencies for my project through npm, as it keeps showing an error

Recently, I decided to delve into the world of HTML5 and javascript games by running a browser game from Github. The game that caught my eye is called BrowserQuest, and you can find it on Github. A hiccup arose while using npm debug: 237 error 404 Not ...

Error encountered with Open Graph tags on Nuxt.js (production environment?)

I recently incorporated OpenGraph tags into my Nuxt.js application by following the guidelines outlined in their SEO documentation available at https://nuxtjs.org/examples/seo-twitter-og The tags are being set from a child component using the SocialHead c ...

Implementing real-time data visualization by dynamically updating a line graph on a website using information retrieved from a Java

Currently, I have a java application running on one PC and a web application consisting of javascript, html, and bootstrap hosted on a tomcat server on another PC. The java application includes two variables within a class - distance and time - that are c ...

What is the best way to stop webpack from generating typescript errors for modules that are not being used?

The directory structure is set up as follows: └── src ├── tsconfig.json ├── core │ ├── [...].ts └── ui ├── [...].tsx └── tsconfig.json Within the frontend, I am importing a limi ...

Getting Permission in the latest Facebook JavaScript SDK: A Step-by-Step Guide

I've been working on transitioning to the new Facebook JavaScript SDK from the old JavaScript library (where I was using Connect) and unfortunately, I'm facing issues with getting the permission dialog to pop up. My goal is to display the permiss ...

Tips for indicating request parameters in Drive.Comments.list

I have successfully retrieved the default 20 comments using the code below by specifying a single fileId parameter. However, I am interested in pulling back one hundred comments or paginating to the next set of 20 out of curiosity. In my getComments funct ...

Experimenting with mocha and Nightmare.js, utilizing traditional syntax and without the use of ES6 features

Here is a real-world example that I am using: How to Use Nightmare.js without ES6 Syntax and Yield However, when I include it in a Mocha test, it times out. Here's the code snippet: describe('Google', function() { it('should perform ...

Endless time continuum within the scheduling application

Looking for a way to make the time axis in my scheduling app infinite? Currently, it has a fixed length, but I want users to be able to scroll endlessly into the past or future. Any suggestions on how to achieve this? Check out this JSBin for a basic exam ...

The authorization process for uploading data to Azure Data Lake Gen2

Currently, I am working on generating a Shared Access Signature (SAS) client-side within my Node.js application. The primary goal is to allow users to directly upload files to my Azure Data Lake Gen2 Blob Storage container without streaming them through th ...

The React setState function isn't updating the state as expected when used within the useEffect hook

I'm new to using hooks and I'm facing an issue with setState when trying to update data received from an API. Despite logging the response data successfully, it seems that the state does not update as expected. My useEffect function is set to run ...

What could be the reason my script fails to execute during an AJAX refresh?

As I was working on my project's avatar uploader, everything seemed to be going smoothly until this morning when chaos ensued. It was a moment of pure sadness. Initially, selecting a file would prompt the crop tool to appear immediately, and it worke ...