Is it possible to instantiate a Backbone view by referencing its string name that is stored within a JavaScript object?

I am currently working on a visual builder that utilizes different views for each component. Each view is defined as shown below:

$(function() {
   var parallaxView = new Backbone.view.extend({
        ....
   });
   var parallaxView = new Backbone.view.extend({
        ....
   }); 
}); 

As I progress, I find myself needing to create a new object view from the stored name of the view in an object.

name

My query is whether it is possible to create an object using the value of 'name' as the class name, similar to creating a new class.

var myView = new name(param1, param2);

instead of having to use a switch statement like this:

switch (name) {
   case 1:
      ....
}

I have attempted to do this:

var myView = new name(param1, param2);

and understand why it does not work. Is there any alternative way to create an object in a similar manner?

Answer №1

If I have grasped your query correctly, one way to save views constructors is by storing them in an object as shown below:

$(function() {
    window.views = {
        'parallax': Backbone.View.extend({ /*...*/ }),
        'test': Backbone.View.extend({ /*...*/ })
    };
});

You can then instantiate these views like so:

// var name = 'parallax';
var myView = new window.views[name](param1, param2);

Do inform me if the issue is not what I have comprehended.

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

How to handle multiple radio inputs and determine the checked value in Vue?

Currently, I am in the process of learning Vue.js and developing a basic poll generator. However, I have encountered an issue with radio inputs. In this application, each question can be of two types - 'select' or 'range.' 'Select ...

"Enhancing security measures with multiple nonce for Content Security Policy

I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...

Exploring an XML document with HTML

I have an XML file that is paired with an XSL file. The resulting output can be located here. I am working on creating an HTML webpage where users can input a search query, such as 'Year < 2009', into a search box. The table above will then d ...

Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

I am facing a similar issue to Convert an HTML form field to a JSON object with inner objects, but in the opposite direction. Here is the JSON Object response received from the server: { company : "ACME, INC.", contact : { firstname : "Da ...

How can I generate a hyperlink for a specific directory on Github Pages?

If I have a repository with one file and one folder, as listed below: index.html folder The folder contains another file named: work.html My goal is to access the folder website using only the link: username.github.io/repositoryname/folder Instead ...

What is the best way to integrate external JavaScript libraries into Meteor.js?

When working with Meteor, how can I incorporate a 3rd party JavaScript library like gridster.js (http://gridster.net/)? Typically, I would include the script directly in the HTML page. However, is there a way to require it directly in the JavaScript file, ...

What is the comparable javascript code for the <script src="something1.json"></script> tag?

Within my HTML code, I currently have the following line to read a JSON file: <script src="something1.json"></script> Inside this JSON file, there is a structure like so: var varName = { .... } This method of definition naturally sets up ...

MongoDB Sorting Techniques

I'm struggling to figure out how to retrieve an ordered list from MongoDB data. I need to fetch the results from a Mongo collection using return and .find(), structured like this: For instance, let's say I have one collection for cars with 10 do ...

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

I am currently developing an HTML5 web application for WeChat, compatible with both iOS and Android devices, using only pure JavaScript without any third-party libraries like jQuery. The main feature of my app involves creating visually appealing animation ...

What is the best way to smoothly transition in an image that is dynamically set using Angular?

I am using Angular to set a background image for my page, but the current loading behavior is not visually appealing as the image loads from top to bottom. I would like to implement a fade-in effect or load the image from a blurry view to enhance the user ...

Having trouble getting two components to return in React

After successfully implementing the Hello World example by returning "Hello" and "world" from two different components, I encountered a problem with my code. In this specific code snippet, I am unable to return the Menubar component, although the Map compo ...

Comparing a hexadecimal string from a buffer in JavaScript with Python

I am looking to output a hex escaped sequence string from a Buffer. For example: buffer = .... // => <Buffer d3 e9 52 18 4c e7 77 f7 d7> If I use the following: console.log(buffer.toString('hex')); The result is: d3e952184ce777f7d7 ...

What could be causing the responsive line chart from nivo to not appear in jsdom while using Jest?

I am currently working on writing UI tests for my application using Jest/Testing Library. In the testing process, I have integrated the ResponsiveLine component from the @nivo/line library. However, I am facing an issue where the Responsive Line componen ...

Is there a straightforward method to retrieve all information from Vue.js?

Is there a way to extract all of this data? I've attempted using this._data.forEach but it doesn't seem to be effective. Thank you! data() { return { childData: '', credit: '', company: '', email: ...

Peeling back the layers of a particular element

This is my code snippet: <pre id='code'> <ol> <li class='L1'><span>hello</span></li> <li class='L2'><span>Hi</span></li> <li class='L3&apos ...

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

Issue: Module "expose?Zone!zone.js" could not be located

Just started experimenting with Angular 2 and encountering an issue when importing zone.js as a global variable: https://i.stack.imgur.com/gUFGn.png List of my packages along with their versions: "dependencies": { "angular2": "2.0.0-beta.3", "es ...

Finding the Right Path: Unraveling the Ember Way

Within my application, I have a requirement for the user to refrain from using the browser's back button once they reach the last page. To address this, I have implemented a method to update the existing url with the current page's url, thereby e ...

Is your blockui overlay failing to cover the entire page?

I have implemented blockui to display a "Wait ... loading" popup on my webpage. It is mostly working fine, but I am facing a small issue where the overlay does not cover the entire width of the scroll window when I scroll right (although it covers the full ...

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

   **** Sorry for the lengthy title **** Today I encountered a problem that I would like to discuss with all of you. When I click on a "COMMENT" button, instead of triggering JavaScript code to display a CHILD.div inside the corresponding ...