Backbone "recalling" stored data in attributes

Presented here is a basic model:

myTestModel = Backbone.Model.extend({
    defaults: {
        title: 'My Title',
        config: {},
        active: 1,
    }
})

While nothing particularly stands out, there is an interesting observation regarding the persistence of values in the config option between instances. To illustrate this:

var test1 = new myTestModel();
test1.set('title', 'A New Title');
test1.get('config').screen_name = 'Joe';
alert( test1.get('title') );               // 'A New Title', as expected.
alert( test1.get('config').screen_name );  // 'Joe', as expected.

var test2 = new myTestModel();
alert( test2.get('title') );               // 'My Title', as expected.
alert( test2.get('config').screen_name );  // 'Joe', NOT as expected.

The concern that arises is why in test2, the value of screen_name from test1 is maintained. The question then becomes, how can this unintended behavior be prevented?

Answer №1

Uncover a common pitfall in Javascript, as explained in the documentation for model.defaults:

Keep in mind that in JavaScript, objects are passed by reference. So, if you use an object as a default value, it will be shared across all instances. It's better to define defaults using a function.

You can switch to using a function instead of an object to define your defaults:

myTestModel = Backbone.Model.extend({
    defaults: function () {
        return {
            title: 'My Title',
            config: {},
            active: 1
        };
    }
});

Check out this demo at http://jsfiddle.net/nikoshr/Y7PYj/

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

Stop the duplication of the HTML content to ensure only one copy is saved

Recently, I have been coding a feature that saves the HTML of the currently displayed page to another file upon pressing a button. However, I encountered an issue where if the button is pressed multiple times quickly, the saved file contains incorrect HTML ...

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

Guide to integrating google-map-react with Next.js

I can't seem to figure out what's causing the issue. I'm attempting to utilize google-map-react in my Next.js application. I followed the example provided on their npm page almost exactly. Here is the code snippet: import React from "re ...

Using a ternary operator to render a span tag in ReactJS

I need to display a number in a span tag with larger font size in Spanish. Here is my React.js code using a ternary operator: <div> {togo !== 0 ? (<div className="text-center"><span className="display-4">{togo}</span>{togo > ...

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

What steps can I take to enable search functionality in Ckeditor's richcombo similar to the regular search feature in

I am currently developing a custom dropdown menu using the rich combo feature in CKEDITOR. One of my goals is to include a search functionality within the dropdown, such as a key press search or an input textbox search. This is how my dropdown box appear ...

Module 'js' not found

Upon adding a request, I encountered this error message. I attempted npm install js and added var js = require("js") in my app.js file, but unfortunately it did not resolve the issue. My express server is running on localhost. Error: Cannot find module &a ...

Ways to retrieve interface definition using a variable

I have an interface that organizes various states together export interface ScanFiltersStatePage1 { keywords: SensitiveInfoFileKeywordFilter categories: string[] classifications: string[] fileTypes: string[] infotypes: string[] regulations: str ...

Skipping beforeRouteLeave in VueJS

In my Vue SPA, there is a component where I am using the beforeRouteLeave guard to prevent accidental page exits. However, within this component, I occasionally make an ajax request that, upon successful completion, needs to redirect the user to another lo ...

Determining the container height for every two-image row

I am currently working on a project for this website. My focus right now is on resizing vertical images using the following script: function Gallery(selector) { this.add_module = function (type, image) { var portrait_text = image.next('.portr ...

Retrieving JSON data via an AJAX call

Similar Question: Sending PHP json_encode array to jQuery I've created a function that searches a database for a specific name using $.post. It returns user details with matching search criteria in JSON format generated by PHP, like this: Arra ...

Unable to bind knockout dropdownlist data during an ajax request

Trying to connect a dropdownlist in knockout with MVC 4. Below is the code snippet: Action public JsonResult GetUserTypes() { using (QuestApplicationEntities db = new QuestApplicationEntities()) { var usertypes = (from ...

Using a JSON file as a variable in JavaScript

Hello there everyone! I am looking to create a multilingual landing page. The idea is to have a language selection dropdown, and when a language is chosen, JavaScript will replace the text with the corresponding translation from a JSON file. However, I a ...

Looking for a method to substitute "test" with a different value

Showing a section of the menu using <li id="userInfo" role="presentation" data-toggle="tab" class="dropdown"> <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyph ...

What is the best way to implement a delay before calling the owlCarousel function?

Is there a way to delay calling the owlCarousel function for 5 seconds? I attempted the following: $(document).ready(function(){ setInterval(function(){ $(".demo-slide").owlCarousel(); },5000); }); However, I encountered ...

Dividers afloat - expanding current script with multiple additions

I am currently utilizing this website as a hub for showcasing my various web projects. The jsfiddle code provided in response to this particular inquiry is exactly what I need, however, I am unsure of how to have multiple divs moving simultaneously acros ...

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

navigator.mediaDevices.getDisplayMedia({ audio: false, video: true }).then(gotMedia).catch(function(e) { console.log('getDisplayMedia() error: ', e); }); Triggering the above code will result in a popup like this. There is anoth ...

What causes json.parse to malfunction? and how can you resolve the issue

My server sends data to my JavaScript code in the format below. {"triggers": [{"message_type": "sms","recipients": "[\"+91xxxxxxxxx\",\"+91xxxxxxxxx\"]", "message": "This is a test"}]} To parse this JSON string, my code executes the f ...

The Owl Carousel npm package is experiencing issues within a ReactJS environment

Currently, I am developing a reactjs application and utilizing the owl carousel npm module to display some data. In my codebase, there is a component dedicated solely to rendering the owl carousel. To achieve this functionality, I have installed the owl c ...

retrieve today's date with parsed time using moment

I am attempting to retrieve the current date and time, with the specified time using moment js. Here's what I have tried. const time = '18:00' const timeAndDate = moment(time) However, when I display timeAndDate, it indicates an invalid da ...