Issue with Ember Select not updating selection binding when populated by another Ember Select

New to Ember.js and grappling with the binding of selection in Select views to the controller. The template I am working with is as follows:

{{view Ember.Select
  contentBinding="content"
  selectionBinding="selectedCompany"
  optionLabelPath="content.name"}}


{{view Ember.Select
  contentBinding="selectedCompany.employees"
  selectionBinding="selectedEmployee"
  optionLabelPath="content.name"}} 


Employee: {{selectedEmployee.name}}
Age: {{selectedEmployee.age}}

Noticing that the second select updates upon a change in selectedCompany. However, unable to access the values of name or age in selectedEmployee until manually altering the value in the second select.

Seeking insight on how to ensure selectedEmployee is set when there's a change in the first select, allowing for immediate use of its value.

For those who prefer visuals, view my functional code here.

javascriptember.js

Answer №1

When you change the content of the second selectbox, it doesn't automatically update its selection. You have to manually intervene by adding the following method to the controller:

onChangeCompany : function() {
    if (!this.get('selectedCompany.employees').contains(this.get('selectedEmployee'))) {
      this.set('selectedEmployee', this.get('selectedCompany.employees').objectAt(0));
    }
}.observes('selectedCompany')

Some additional checks for non-null values and array ranges are still needed, but this method does the trick - when you select an employee and then change the company, the employee will also be updated accordingly.

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

An issue occurred with the session being undefined in Node.js Express4

I'm encountering an issue where my session is undefined in new layers even after setting the value within an "if" statement. /*******************************************/ /**/ var express = require('express'), /**/ cookieParse ...

javascriptnode.jssessionexpress

How can I implement Jquery validation engine ajax for two different fields using the same function?

The jQuery validation engine plugin has a unique feature of performing ajax validation. However, there is a minor inconvenience with this functionality. Instead of validating the field name, it sends the field ID for validation. Why does this pose a prob ...

javascriptjqueryajaxjquery-validation-engine

The process of converting a data:image base64 to a blob is demonstrated in this code snippet

Seeking a way to convert data:image base64 URLs to blob URLs. Below is the original code that generates the base64 URLs: <script> $(window).load(function(){ function readURL() { var $input = $(this); var $newinput = $(this ...

javascriptjqueryhtml

Uploading files using Multipart/form-data in Node.js and Express.js

With the removal of express.multipart from the Express 4.x library, what approach would be most effective for managing file uploads in expressjs? ...

javascriptnode.jsexpress

The code function appears to be malfunctioning within the Cordova platform

When working with Cordova, I encountered an issue where I needed to trigger a button event from a listener. In my app, I am loading a specific page . This page contains a button with the class name "btn", and I wanted to display an alert when that button i ...

javascriptjqueryasp.netcordovaphonegap

Ways to access Angular controllers from various folders

Yesterday, I dove into learning my first node.js/MEAN application and stumbled upon this helpful tutorial to kick-start my journey: https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular After following the tutorial and successf ...

javascriptangularjsnode.jsmean-stack

Can we pass a search term parameter to getServerSideProps in Next.js?

I've been working on a project to organize all my notes and summaries in one place. The notes are stored as markdown files, converted to HTML dynamically in the backend (it's functioning well). Now, I want to add a search feature on the notes p ...

javascriptreactjsnext.js

What is the best way to initiate a re-render after updating state within useEffect()?

I'm currently strategizing the structure of my code using React hooks in the following manner: Implementing a state variable to indicate whether my app is loading results or not The loading state turns to true when useEffect() executes to retrieve da ...

javascriptreactjs

Error in Compiling HTML Elements Collection<<Element>

Currently, I am developing an eCommerce application that features a popup window for users when they click on "Add to Cart." This popup allows users to select product variations and quantities before adding the item to their cart. The popup consists of a s ...

javascripthtmlangulartypescript

"Successfully rendering the map on the initial load, but encountering an error of 'cannot map undefined'

Having trouble displaying data retrieved from an API. Initially, the movie titles are shown without any issues. However, upon refreshing the page, an error message stating "cannot map undefined" appears. Here is the code snippet: const [media, set ...

javascriptreactjsreact-hooksnext.js

What is the best method for combining numerous tiles within a level in Kaboom JS?

Creating a level in kaboomJS with a extensive tile map collisions can sometimes result in slower performance. I'm exploring options to optimize this process, such as potentially merging multiple tiles together so that a whole row of blocks could funct ...

javascriptkaboom

Refresh page to reload JSON file with jQuery

My current objective is the following: $.getJSON(sampleJson.json), function(data) {} I aim to read data from sampleJson.json and display it on a webpage. The displayed data can be altered through an AJAX call like so: $.ajax({type: "GET", url: "...", da ...

javascriptjavajquery

How can you iterate over the input elements that are currently visible within a form using Javascript?

Is there a way to clear the values of all visible input fields in a form using JavaScript? I'm currently struggling with setting text inputs to empty as they come out as undefined. Any suggestions on how to achieve this? ...

javascriptjqueryhtmlchildren

The current Webpack configuration for production fails to account for importing CSS files

I am struggling to figure out how to properly load a static site that is not located in the root folder: let HWPTest = new HtmlWebpackPlugin({ template: __dirname + "/src/artists/test.html", filename: 'artists/test.html', favicon: &apos ...

javascriptnode.jsnpmwebpack-4html-webpack-plugin

Is there a way to extract information from the HTML source code of an external website and display it in my application?

Seeking a method to search an external URL for content that matches "title" and then display the results on my HTML page using Javascript. Despite my efforts with Javascript, I have not come across any resources that address this issue. Could it be that I ...

javascriptjqueryhtml

Executing script once the DOM has completed loading

In my project, I'm dynamically generating menu items for a menu bar based on headers from external files that are imported using an XMLHttpRequest(). The menu bar is then updated as I navigate through different pages. Everything works smoothly. Each ...

javascripthtml

Utilize an A-frame conditional statement to check a variable and dynamically display various glTF models depending on its value

Is it possible to use JavaScript and A-frame () to create a scenario like this? I want to have an onload function named load() that will evaluate the value of variable x. If x is equal to one, I want the gltf with the ID of 1 to be visible while hiding th ...

javascripthtmlthree.jsaframewebvr

Learn how to apply inline styles to multiple objects within a single element using React

In my project using React, I am attempting to apply styles only to a specific element within another element. Here is an example with an h1 tag: const Header = () => { const firstName = "Ashraf"; const lastName = "Fathi"; const date = new Date() ...

javascriptcssnode.jsreactjsecmascript-6

Using Typescript to pass a property as one of the keys in an object's list of values

In my React Native project, I need to pass a string value from one component to another. The different options for the value can be found in the ScannerAction object: export const ScannerAction = { move: 'move', inventory: 'inventory&apo ...

javascriptreactjstypescriptparameter-passing

Why is the size of my array shrinking with every iteration of the for-loop in JavaScript?

I am struggling to change the classname of three elements that share the same classname. Unfortunately, as I loop through my array, it seems to decrease in size with each iteration, preventing me from successfully changing all three elements. Any advice or ...

javascripthtmlarrays