Ember employing the [needs] declaration to establish communication between views

Is it possible to interact between emberViews?

I had a setup using controllers that worked well before.

>> Index Controller
    var StudyController = Ember.ArrayController.extend({
      needs: ['study/study'],
      actions: {
        filterStudies: function(){
          console.log('FILTER ENGAGED!');
          this.transitionToRoute('study.search', this.get('search'));
        }
      }
    });

In the StudyIndex HBS file, I used the following which was now handled in the controller between the 'needs' tags:

{{action 'deleteStudy' this target='controller.controllers.study/study'}}

Answer №1

Direct communication between views is not possible. Instead, you should establish an indirect communication through your controllers. Let's consider a fictional example involving two views and their respective controllers:

You need to trigger an action from FirstView to FirstController (which in turn requires SecondController). FirstController will then pass on the action to SecondController. SecondController will perform its tasks (e.g., setting a property) and inform SecondView accordingly.

Update: Sample Scenario

Please note: This explanation assumes that you want to send data from FirstView to SecondView. If your event doesn't require any arguments, you can omit them.

View:

App.FirstView = Ember.View.extend({
    submit : function(){
            // Perform view-specific logic
        var object = // Do whatever is necessary here
        this.get("controller").send("actionInController", object); // No need to send an object if it's not required
    }
});

Controller:

App.FirstController = Em.ObjectController.extend({
    needs : ['second'],
    actions : {
        submitInController: function(object) {
          // Implement controller-related logic
          this.get("controllers.second").methodOfSecond(object);
        }
    },
});  

App.SecondController = Em.ObjectController.extend({
    someProperty : null,
    methodOfSecond: function(object) {
        // Set the necessary property to notify the second view
        this.set("someProperty", object);
    }
});

Answer №2

Communication between Ember views can be achieved in various ways depending on the context of the interaction. If you are looking to access properties, actions, and functions from one view to another, there are a couple of approaches you can take.

One method is to extend one view from another like this:

App.BaseView = Em.View.extend({
    // View logic here
});

App.OtherView = App.BaseView.extend({
    // Additional view logic here
});

Another way to achieve this is by using mixins. Here's an example:

App.BaseStuff = Em.Mixin.create({
    // Functions and other logic here
});

App.OtherView = Em.View.extend(
    App.BaseStuff, { // Include mixin here
    // View logic here
});

However, if your question pertains to accessing the content or model of one view from another, this requires additional steps. You may need to utilize the needs property in the controller or access data through the current route, among other techniques.

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

Issue with Angular 8: click event is not triggering when using ngFor directive to iterate through arrays of objects

Update: The original post has been modified to omit implementation details and complexity. I am facing an issue with an ngFor loop that invokes a method on a service. The method returns an array which is then iterated over by the for loop. The click even ...

Creating a dynamic list in HTML by populating it with randomly selected words using JavaScript

Check out my awesome code snippet function wordSelect() { var words = ["Vancouver", "Whistler", "Surrey", "Victoria", "Kelowna"]; //List of randomly-selected words from above var selectedWords = []; for(let i = 0; i &l ...

What is the best way to have child divs occupy the entire area of the parent div while also accounting for margins

I am facing a challenge with arranging child divs inside a parent div that has a specific width. Even though I am using isotope to arrange them, the layout modes do not work well for me in terms of spacing. My goal is to have the child divs fill the space ...

Creating PDFs in Angular 8 with jsPdf

Currently, I am utilizing jsPdf to create a PDF document that captures the contents of my HTML screen. Upon completion, the downloaded PDF file appears in my download folder. Is it possible to alter the default download path for the PDF? Instead of the st ...

Display a variety of images all in one slider page effortlessly with the ngb-carousel feature

I'm currently utilizing Angular 6 and ng-bootstrap to implement a carousel feature on my website. Although the carousel is functioning correctly, I am facing an issue where only one image is being displayed in each slide instead of four images per sl ...

Retrieving the value of a JavaScript variable from an HTML document using Python

I am looking to extract the value of myJSONObject from an HTML document that includes javascript code with a JSON object. Here is an example snippet: <html> <head> </head> <body> <script type="text/javascript"> ...

Leverage SVGs imported directly from the node_modules directory

Our architecture has been modularized by creating a node_module that contains all SVG files. Using the following code works perfectly: <q-icon> <svg> <use xlink:href="~svgmodule/svgs/icons.svg#addicon"></use> </svg> ...

Issue: missing proper invocation of `next` after an `await` in a `catch`

I had a simple route that was functioning well until I refactored it using catch. Suddenly, it stopped working and threw an UnhandledPromiseRejectionWarning: router.get('/', async (req, res, next) => { const allEmployees = await employees.fi ...

Updating the Progress Bar in Shopify when the "Add to Cart" button is clicked: A step-by

I'm currently working on implementing a shipping progress bar on my Shopify Theme. However, I've encountered an issue where the progress bar does not update correctly unless I refresh the page along with the content text. Can anyone provide guid ...

pure-react-carousel: every slide is in view

Issue I am encountering a problem where the non-active slides in my container are not being hidden properly. This results in all of the slides being visible when only one should be displayed. Additionally, some slides are rendering outside of the designate ...

What is the best way to define a function in React hooks - using a function statement or

When working with a react hook and needing to define a function inside it, which approach is preferable? useEffect(() => { //... function handler() {} //... }, []); or should I use the newer const declaration instead? useEffect(() => { ...

Retrieving domain parameters when delivering an HTML file

I am looking to retrieve the parameters of the paths on my domain, but I'm uncertain about how to serve a static file at the same time. This is my goal: app.use('/Game/:room', (req, res) => console.log(req.params.room), express.static(&a ...

Characteristics of events within the embed element

<div id='aplayer'></div> js $('#note').click(function() { $('#aplayer').html("<embed src=" + music + " onended='test();'" + ">"); }); function test(){ alert ('525'); } audio is ...

Exploring the indexOf method in Jade

Currently using Jade and Express. '#{value.users}' is an array data type. '#{user.username}' is a string data type. Attempting to utilize the if '#{value.users}'.includes('#{user.username}') method. When true, I ...

Determining the height of a Bootstrap column in relation to another element

Utilizing the grid layout from bootstrap, I have the following structure: <div id="prof_cont_enclose"> <div class="row"> <div class="prof_cont_row"> <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem"&g ...

Disabling GPS with HTML5/phonegap: A step-by-step guide

Looking to create a function that can toggle GPS on and off for both iPhone and Android devices ...

Error: Unexpected syntax error in JSON parsing after importing PHP file

Encountered an unexpected error: Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data site:stackoverflow.com, which is appearing in the Firefox debug console. On my website, I have a form that triggers this function o ...

Automatically Assigning a Default Value to a Column Using SEQUELIZE ORM

When fetching data from a database using Sequelize ORM, I need to set a default value. Here is an example of the SQL query: SELECT a.affiliate_id, a.active AS current_state, IF(MAX(cn.contract_id) IS NULL ,0, IF(DATEDIFF(NOW(),MAX(cn.contract_date) ...

Bidirectional Data Binding in AngularJS

In my angular application, there is a dropdown with various values. When a user selects a specific value from the dropdown, I want to display the complete array corresponding to that value. <!doctype html> <html lang="en"> <head> < ...

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

I am facing an issue with a table and row highlighting in my code. Even after clicking on a row, it remains highlighted. I attempted to use the <TableRow disableTouchRipple={true}> but it didn't work as expected. What can I do to remove the high ...