I wish for my View to be able to identify and acknowledge the class of another View

Question

I wish for my View to be able to identify and acknowledge the class of another View

There are 4 handlebar helper blocks named

{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}

and I'm trying to reference them all using Jquery by calling their class, 'fieldInput'

However, when I use

{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}

, the fieldInput class is not recognized

I suspect this may be due to the order in which the views were rendered, but I would appreciate a second opinion

Below is the view that defines these blocks.

VpcYeoman.DecoyInputView = Ember.View.extend({
  tagName: 'div',
  click: function(e) {
    console.log('CanFocusInputView clicked')
    $('.fieldInput').removeClass('.focusedInput'); 
    this.$().addClass('focusedInput');
  },
});

Ember.Handlebars.helper('decoy-Input', VpcYeoman.DecoyInputView);

In order to achieve success, you need to find a way to access all 4 of the

{{#decoy-Input class="fieldInput"}} {{/decoy-Input}}

blocks within the Decoy Input click function without relying on JQuery.

I understand that something like '

this.$().parent().siblings('.objectInput').children().removeClass('focusedInput');

' could resolve the issue as well, but it seems like a suboptimal solution.

javascript jquery html css ember.js

Answer 1

Answer №1

In certain situations, it can be beneficial to utilize Ember's run loop and DOM hooks to streamline your code.

To achieve this, wrap everything in a specific view:

{{#view CustomView.InputsView}}
  <input type="text" name="username"/>
  <input type="password" name="password"/>
  <!-- alternatively, use the input helper for value binding -->
  {{input type="checkbox" name=rememberMe}}
{{/view}}

Next, activate the view and take advantage of the didInsertElement hook to incorporate some traditional jQuery functionality (not Ember related).

CustomView.InputsView = Ember.View.extend({
  didInsertElement: function () {
    var $inputs = this.$('input');

    $inputs.on('focus', function (e) {
      $(this).addClass('focusedInput');
    });

    $inputs.on('blur', function (e) {
      $(this).removeClass('focusedInput');
    });
  }
});

This approach should provide the desired outcome without unnecessary complexity. Feel free to reach out if you need further clarification!

Answer 2

In certain situations, it can be beneficial to utilize Ember's run loop and DOM hooks to streamline your code.

To achieve this, wrap everything in a specific view:

{{#view CustomView.InputsView}}
  <input type="text" name="username"/>
  <input type="password" name="password"/>
  <!-- alternatively, use the input helper for value binding -->
  {{input type="checkbox" name=rememberMe}}
{{/view}}

Next, activate the view and take advantage of the didInsertElement hook to incorporate some traditional jQuery functionality (not Ember related).

CustomView.InputsView = Ember.View.extend({
  didInsertElement: function () {
    var $inputs = this.$('input');

    $inputs.on('focus', function (e) {
      $(this).addClass('focusedInput');
    });

    $inputs.on('blur', function (e) {
      $(this).removeClass('focusedInput');
    });
  }
});

This approach should provide the desired outcome without unnecessary complexity. Feel free to reach out if you need further clarification!

I wish for my View to be able to identify and acknowledge the class of another View

Answer №1

Similar questions

Dynamically loading a JSON file in JavaScript

"Troubleshooting issues with retrieving data from database using Ajax and

A different option for incorporating interactive external content without using iframes

Using Javascript to move the cursor within an editable table before saving the row

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

What is the best way to create a separate text box for each image on a page?

Different ways to trigger events with the press of a single button

The functionality of a custom control's jQuery code is not functioning properly following a postback

By utilizing JavaScript/jQuery, you can validate URLs to ensure they begin with either http or https and include

Is there a way to serialize a dynamically loaded element with jQuery?

Express Router triggers XHR onreadystatechange 3

arranging fashionable divs side by side

Utilizing TranslateHttpLoader with a service URL in ngx-translate: A step-by-step guide

retrieve the image name of the background using jQuery

Troubleshooting Asp.Net4 Minification Issue with JavaScript/jQuery

Remove an item from a complex JSON structure based on the specified name. The function will then return the

Error Encountered: Module 'openpgp' Not Found

Remove any unnecessary space from the SVG file while maintaining its original dimensions

What is the best way to insert fresh input values into a different element?

"Exploring ways to create and save content in a different root folder within a nodejs project using my