Associating fixed UI element interactions with Backbone's View component

I'm looking to add a click event to a button without relying on using a template.
Creating the HTML

<div id="transfer">
            <input type="text" placeholder="From Address" id="fromAddress" />
            <input type="text" placeholder="To Address" id="toAddress" />
            <input type="text" placeholder="Amount" id="amount" />
            <input type="button" id="transferMoney" value="Transfer"/>
        </div>

Using Backbone View

var TransferView = Backbone.View.extend({
    events: {
        "click #transferMoney": "sendMoney"
    },
    sendMoney: function() {
        alert();
        console.log($("#fromAddress").val());
        //this.model.transferMoney();
    }
});

var transferView = new TransferView({model: transferMoney});
transferView.render();

However, I'm having an issue where sendMoney() is not triggered when clicking on the #transferMoney button.
Is it necessary to always create buttons using template?

Answer №1

The reason for this limitation is that the events hash is specifically defined within the scope of the view (refer to ). Give this a try:

var TransferView = Backbone.View.extend({
    initialize: function(){
        $("#transferMoney").on("click", this.sendMoney);
    },
    sendMoney: function() {
        alert();
        console.log($("#fromAddress").val());
        //this.modeltransferMoney);
    }
});

var transferView = new TransferView({mdoel: transferMoney});
transferView.render();

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

Exploring Ngu-Carousel in Angular 7: Importing JSON data for a dynamic display

After attempting to import data from JSON and display it using ngu-carousel, I encountered an error. The error shows "length of undefined" Subsequently, when I try to click on the previous/next button, another error appears. This error states "innerHTML ...

What are some alternative ways to utilize jQuery siblings() without restricting it to the same parent element?

In the code provided below as Non-functional code [1], it will function correctly with siblings() to disable other input fields if their sum or amount exceeds a specified maximum value. This works effectively when all input fields are within the same paren ...

The POST request made using Postman shows an empty Node.js/Express req.body

Here is the current code snippet I am working with: var express = require('express'); var router = express.Router(); var db = require('../helpers/db'); var data = { "1": 127, "2": 236, "3": 348 } router.get('/', ...

The onmouseup event is not triggering in Vue.js 2

Show me the full code example here: https://github.com/kenpeter/test_vue_simple_audio_1 Attaching @onmouseup to the input range appears to have an issue. When I drag the slider, the function progressChange does not seem to be triggered. <input type ...

Transforming JSON data into HTML code

I am looking to transfer a list of songs from a JSON file to specific HTML ids using a jQuery function. In the JSON file, there are five songs, and here are two of them in the same format: { "songs": [ { "title": "Bohemian Rhapsody ...

Load ajax content dynamically based on the updated URL

Exploring ajax for the first time and having some issues. Currently, I am retrieving text from files based on the URL. This is how it's set up: var home_url = "blahblah/index.html#home"; var test_url = "blahblah/index.html#test"; $(document).on("c ...

The 'log' property cannot be found on the type '{ new (): Console; prototype: Console; }' - error code TS2339

class welcome { constructor(public msg: string){} } var greeting = new welcome('hello Vishal'); Console.log(greeting.msg); I encountered an error at the Console.log statement. The details of the error can be seen in the image attached below. ...

Using ng-repeat to display table data in AngularJS

There is an array with 7 elements, each containing an object. The goal is to display these elements in a table with one row and 7 columns. The desired output should look like this: some label1 | some label2 | some label3 | some label4 | some label5 som ...

Is there a comparable Javascript alternative to the Ruby gem "site_prism" for Page Objects design?

Is there a JavaScript framework for Protractor in NodeJS that provides a clean way to define Page Object Elements similar to site_prism? I've explored astrolabe but it doesn't quite meet the requirements. This is an example of how Page Objects a ...

define a variable within a v-for loop

Example of Code <div v-for="item in dataItems"> <div v-if="enableEdit"> <input type="text" v-model="name"> </div> <div v-else> {{name}} </div> <button @click="enableEdit = true">click</button> This ...

Node.js Middleware Design Pattern: Connectivity Approach

I am embarking on a journey to learn Javascript, Node.js, Connect, and Express as part of my exploration into modern web development stacks. With a background in low-level networking, diving into Node.js' net and http modules was a smooth process for ...

The question of when to utilize userEvent.click versus fireEvent in React Testing Library

I'm currently diving into the world of React-Testing-Library. One question that I have is regarding testing mouse interaction on an element. I find myself a bit confused about whether to use userEvent.click(element) or fireEvent.click(element). Can b ...

Set a restriction on the Bootstrap DatePicker to only show dates within a

My application features StartDate and EndDate datepickers, and I need to implement a 30-day limit on the selection range to prevent performance issues caused by loading too much data. I'm looking for a functionality where if the user picks today as t ...

Understanding the process of parsing an array in form-data in Node.js

https://i.stack.imgur.com/FPhX1.png I'm currently facing an issue while trying to read the image above in Node.js. I am using Express.js and have attempted to debug req.body, but it is returning an empty object {}. Even though I am using app.use(bod ...

The Bootstrap modals seem to be invisible within the Rails application

Currently, I am integrating jquery into the devise views of a sample rails application. My intention is to test it on a sample app before implementing it in a production code. The controller and view for welcome are already set up. The routes.rb file loo ...

"Troubleshooting: ngForm.controls returning undefined value in Angular application

Trying to test this HTML code in Angular: <form name="formCercarUsiari" #formCercarUsuari="ngForm" class="tab-content"> <input #inputNif class="form-control input-height" maxlength="100" type="text" placeholder="Indiqui NIF" name="nif" i18n-pla ...

Using JavaScript requests to save XML data and PHP to read and process the XML data stored in MySQL

I have encountered an issue while trying to save XML content, received as plain text, into my site's database. I came across advice suggesting not to store XML in a text field but instead use a blob. So, I proceeded to save it as a blob using CORS and ...

Express: issue retrieving numbers from request body array

JavaScript / TypeScript Issue: export const updateSettings = catchErrors(async (req, res) => { console.log("updateSettings req.body: ", req.body) const { organizationId, formdata, updatedItems, updateQuota } = req.body; console.lo ...

Adjusting the background element of a fullpage.js layout during resizing and customization

Is there a way to make the background image responsive on a fullpage.js page, specifically for mobile and tablet devices? How can I ensure that a specific part of the image stays at the center of the page when resizing? For instance, in the provided imag ...

Exploring the functionalities of command line arguments in Vue.js

Is there a way to set command line arguments for a Vue.js application? I am utilizing Vue 3 on the frontend which interacts with a Python backend (Flask) using Axios. Currently, I am defining the baseURL for Axios in my main.js file as follows: import axio ...