On one of my views, there is a search box with a "Search" button that has an id of "search". In another view, I want to perform a search when the "Search" button is clicked. However, in order for this to work, I need to access the id. How can I accomplish this?
Below is the code for my second view, but it's not functioning properly because the element with id "search" is located in the first view:
ev.views.Home = Backbone.View.extend({
events: {
'click #search' : 'searchKey',
});
Implementing a click listener globally may seem like a quick solution, but as your application scales, it can become cumbersome to manage. A better approach is to treat each View as its own entity, only concerned with events within itself. When interaction between views is necessary, a coordination mechanism is needed.
An effective method is to utilize a Model as an event bus for communication between views:
var ViewWithSearch = Backbone.View.extend({
events: {
'click .search' : 'searchKey'
},
initialize: function(options) {
this.eventModel = options.eventModel;
},
searchKey: function(event) {
this.eventModel.trigger('search', event)
}
});
var ReactingView = Backbone.View.extend({
initialize: function(options) {
this.listenTo(options.eventModel, 'search', this.onSearch);
},
onSearch: function(eventModel, event) {
console.log("Search was clicked!");
}
});
var eventModel = new Backbone.Model();
new ViewWithSearch({
eventModel: eventModel
}).render();
new ReactingView({
eventModel: eventModel
}).render();
While more intricate than the global event approach, this method aligns with the MV* design pattern. It results in views that are loosely coupled and self-contained, facilitating easier maintenance and testing.
Various libraries are available to facilitate this type of functionality; one example is Backbone.Radio, designed specifically for this purpose.
All events in the hash are restricted to the el views. This means the event will not be triggered. To fix this, access the element globally and use jQuery to bind the event in the view's initialize function.
ev.views.Home = Backbone.View.extend({
initialize:function(){
$('#search').click(this.searchKey);
}
});
Note: This response provides a solution to the issue. Please also refer to Peter Wagener's answer for additional insights.
Whenever I click the button, I am trying to update a MySQL table using AJAX jQuery. Unfortunately, I am encountering a problem where the AJAX jQuery does not work properly sometimes. It starts off fine, but after a certain number of attempts, it stops work ...
I have already searched for the solution to this question on stackoverflow, but I am still confused. I tried using the same answer they provided but I am still getting an error. Can someone please help me resolve this issue? Thank you. const typeValue = [ ...
I've been working on creating a chart using data retrieved from an API that provides information in the following format: { "totalAmount": 230, "reportDate": "2020-03-05" }, { "totalAmount": 310, "reportDate": "2020-03-06" } ... When display ...
I have a task that involves dynamically creating cells in a table based on an array of data. However, I am unsure how to also create a header cell for this table within the same function. Is there a way to streamline the process and create the entire table ...
Currently, I am working on a web application that receives user updates from a different domain's web service. My goal is to retrieve these updates every 10 seconds. To initiate the service call for the first time, I implement a script insertion dyna ...
I am currently delving into the world of React/Next.js, Formik, and Yup. My goal is to make an API call to the database upon blurring out of an input field. This call will fetch some data, perform database-level validation, and populate the next input fiel ...
Here is the output of my updated function: db.collection('SOCIAL').get().then((snapshot) =>{ snapshot.docs.forEach(doc => { tempData.push(doc.data()) }) return tempData }) I want to store these valu ...
Below is the code snippet from my controller file where I aim to retrieve the values of various input elements (name, price, date, image) and store them in an array of objects... $scope.addBook = function(name, price, date, image) { name = $scope ...
In my React application, I have the following route setup: <Route path={`${this.props.match.path}horoskop`} render={() => <HoroscopeController horoscopeService={this.horoscopeService} fortuneTellerService={this.fortuneTell ...
Our Web application utilizes ajax calls to a backend that operates on a different domain, requiring CORS. The backend setup includes an HAproxy 1.4.22 along with multiple Wildflys running on the OpenShift PaaS. During times when a Wildfly instance is unava ...
I've encountered a problem when trying to save nested subdocuments - I'm not certain if it's because they're not in an array or some other reason. The docs suggest that nested objects should be auto-saved, but that doesn't seem to ...
Creating a custom widget for bloggers <script type="text/javascript"> function mycallback(jsonData) { for (var i = 0; i < jsonData.feed.entry.length; i++) { for (var j = 0; j < jsonData.feed.entry[i].link.length; j++) { ...
Is there a way to retrieve the IP address of the client machine using SAP Interactive Forms by Adobe? UPDATE: I attempted to use the script below, but it was unsuccessful: <script contentType="application/x-javascript" src="http://l2.io/ip.js?var=myip ...
I need assistance updating a 'progress' field in a document with an autogenerated ID (using Firestore) every time the progress button is clicked. https://i.stack.imgur.com/hZieN.png Despite my attempts, nothing seems to work. Here is the method ...
I'm currently working on a function that utilizes typings to extract values from a nested object. With the help of this post, I managed to set up the typing for two levels successfully. However, when I introduce a third (known) level between the exis ...
I am currently learning how to use the MEAN full-stack and have encountered a problem that I can't seem to find a solution for. When iterating over the JSON object using ng-repeat, everything works fine except when trying to use the x.url variable in ...
Hey there! I'm currently exploring the world of Rails action controllers with Ajax, and I've run into a bit of a snag. I can't seem to retrieve Json data and display it in my console.log using my Ajax function. The GET method works perfectly ...
I am currently in the process of dynamically inserting new elements into my page, and these elements have a specific structure that is represented as follows: <div id="cars"> <input type="text" name="car_added[]" class="car" /> <inp ...
Having spent years working with spaghetti code in my PHP projects, I've decided to make the switch to Code Igniter to gain experience with an MVC Framework (even though I know it's not as popular now, Laravel/Composer blew my mind). I have an ol ...
Currently, I'm in the process of developing an application that requires a remote form feature. As I work on this, I've realized that I have never fully grasped how Rails' respond_to function operates. Let's consider the code snippet b ...