Retrieving all form field values simultaneously in EmberJS

When developing form fields in ember.js, it appears to involve a multi-step process. For instance, I define the form fields:

{{input value=email type="email" placeholder="Email" required="required"}}
{{input value=password type="password" placeholder="Password" required="required"}}

then in my controller, it looks like this:

App.AccountController = Ember.ObjectController.extend({
    email: null,
    password: null,
    actions: {
      login: function() {
        var data = this.getProperties("email", "password");

            console.log(data);
      }
    }
});

Essentially, email and password are first set to null at the top, and then again assigned in the 'data' variable to capture the entered values when the user fills out the fields.

Is there a more streamlined way to achieve this? Is it possible to set all field values to null with just one line of code, and then retrieve all the form field values in one go? Maybe something akin to serializing a form in jQuery?

Answer №1

To keep it simple, repetition is necessary when working on this task. While you could try to avoid repeating certain steps, the trade-off might not be worth it.

Firstly, consider that you can omit defining the fields in your controller. These lines can simply be removed:

email: null,
password: null,

Despite this, keeping them for documentation purposes is a wise choice (even though they are unnecessary).

Furthermore, remember that Ember does not inherently recognize a 'form'. You have only specified input boxes without any form elements. If desired, creating a form component tailored to your needs is an option, but it may only be recommended if dealing with numerous forms. Ultimately, some repetition will still be present.

Overall, I believe the current structure of your code is well-done. Prioritize readability over brevity when writing code. The existing code is clear and easily understandable (in my opinion).


EDIT: It appears that an ObjectController was utilized. This type forwards get and set calls to the controller's content if the fields are not explicitly defined on the controller. Hence, removing those two lines will not suffice. However, switching from ObjectController (which is deprecated) to Controller will make it work as intended.

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

My website is experiencing issues with the inner border being transparent and not displaying correctly

I have encountered an issue where the inner border only appears transparent on a single page or JSFiddle, but for some reason it is not working on my website. Can anyone offer any assistance on what might be causing this problem? The border is displaying ...

Unlock the full potential of the PanelSnap plugin in your angular2 project with these easy steps

I had been successfully using the jquery.Panelsnap plugin on my static HTML pages. However, as I am now transitioning my application to angular8, I am encountering difficulties in referencing the PanelSnap plugin. npm install panelsnap Within my app. ...

The ng2-dnd library encountered an issue: StaticInjectorError in AppModule with SortableComponent pointing to ElementRef

I have been experimenting with the ng2-dnd sortable container from ng2-dnd. Below is the HTML code for my component: <div class="row"> <div class="col-sm-3"> <div class="panel panel-success"> <div ...

The issue of batch-wise data clustering on Google Maps when zooming in or out

//The code snippet provided below initializes a map with specified settings and clusters markers based on the data sent in patches of 10000.// var mapDiv = document.getElementById('newmap'); map = new google.maps.Map(mapDiv, { center ...

showcasing JSON data in an HTML table with pure JavaScript

I am currently utilizing vanilla JS to send a client request to a REST web service that I have designed. The GET method I have implemented returns a list of books (List) in JSON format: 0: {name: "To Pimp a Butterfly", isbn: "ACBCDDSA", availableCopies: 1 ...

The appearance of a Phonegap-built application may vary when compared to running it on the Phonegap Developer app

Hey there! I've been experiencing some issues with my phonegap app. Everything runs smoothly when I use the app on my phone, but once I build the app, it appears completely different. The CSS is not being applied and everything looks much smaller than ...

Combining a string with a number in a loop using JavaScript and AngularJS

var number = 0; var date = "2016-05-10" $scope.test = date; I am trying to create a loop using the variable number in order to achieve the following result: $scope.test1 = 2016-05-10 $scope.test2 = 2016-05-10 $scope.test3 = 2016-05-10 The $scope.test ...

Tips for showcasing the latest Google Map InfoWindows above previous ones

I have a dynamic Google Map with InfoWindows being added dynamically, but I am facing an issue where overlapping InfoWindows do not always display the most recent one on top of older ones. Is there a way to ensure that the latest InfoWindow always shows u ...

The issue of assigning Ajax data to jQuery inputs with identical classes is not being resolved correctly

I am currently developing an Invoicing System where the Rate(Amount) value changes automatically when the Product(Item) is changed. The issue I am encountering is that when I change the first Product, all the other Product Rates change to the Rate of the ...

Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

I am currently working on the following code: <h1><span>Test Heading This is the text that I want to display on the right side. This is the text that I want to display on the right side. This is the text that I want</span></h1> < ...

What is the best way to retrieve information from the YouTube API v3 for multiple YouTube channels using just one request?

I am currently developing an endpoint to retrieve data for videos from two specific YouTube channels. I am using the fetch() method along with URL requests and would like to continue using this approach. How can I construct a single URL that will return da ...

How can react.js be unaware of its own node.js module?

Attempting to create a hello world for react.js, I encountered an issue where react.js fails on line 3. The error message states there is a reference error: ReferenceError: Can't find variable: module react.js:3 It seems that it ...

Start an HTML5 video inside an iframe by clicking on the play button on the parent page

My web page features a video in an iframe that can be changed by clicking on links within the page. I have added play and pause buttons on the main page to control playback of the videos within the iframe. On another page without an iframe, I successfully ...

Retrieve Data from an Object using a Different Value

It sounds silly, but I'm struggling with this. I'm working with a basic JS object: var objSyntax = [ {"a": "1"}, {"b": "2" }, {"c": "3"} ]; My goal is to retrieve the value associated with key 'a&apos ...

What is the process for verifying a checkbox after it has been selected?

I simplified my code to make it easier to understand const [factor, setfactor] = useState(1); const [nullify, setNullify] = useState(1); const Price = 10; const Bonus = 15; const finalPrice = (Price * factor - Bonus) * nullify; // start ...

Moving object sideways in 100px intervals

I'm struggling to solve this issue. Currently, I have multiple div elements (each containing some content) that I need to drag and drop horizontally. However, I specifically want them to move in increments of 100px (meaning the left position should b ...

execute a function when an image is clicked using jQuery

How can I create an onclick event for the variable imageCatuaba? function setCatuaba(map) { var imageCatuaba = { url: 'images/catuskov.1.png', origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 32) }; I'm ...

What is the best approach to managing this scenario where the document is ready?

Just a quick question. I have several JavaScript functions written in this format: var app={ start:function(){ //do something and call calculate }, //end start calculate:function(){ //do more stuff } //end calculate }; //en ...

I'm having trouble getting the event listener to trigger when clicking on an image in VanillaJS. Can anyone help me troubleshoot this issue?

I am attempting to create a script that can extract data from my rock paper scissors gameplay on a specific website (): var h_choice = document.querySelectorAll(".play-page-gamer__choices")[0]; var h_rock = document.querySelectorAll(".play-p ...

Trying to figure out how to avoid HTML characters in AngularJS? I've come across suggestions to use ng-bind / ng-sanitize for escaping HTML, but I'm struggling to put

As a newcomer to Angular Js, I recently utilized ngx-editor to create a text-area with various formatting styles. However, upon submitting the content, I noticed that HTML tags were also being displayed. I understand that these tags appear when using diffe ...