Ways to define properties in backbone entities

Question

Ways to define properties in backbone entities

As I work on my app using backbone, I'm encountering a challenge that might be due to a misunderstanding on my part.

I am trying to set specific attributes like titles while also having default values in place. However, it seems that the custom attributes are not being properly applied. Why could this be?

var DataMapper = {
    Models: {},
    Collections: {},
    Views: {},
    Templates: {}
};

DataMapper.Views.OperatorView = Backbone.View.extend({
    el: "#op-panel",
    operators: [],
    events: {
        "click #concat-op-btn": "addConcatOp"
    },
    addConcatOp: function() {
        var concatOperator = new DataMapper.Models.OpContainerBox({title: "Concat", inputCount: 2, outputCount: 1});
        this.operators.push(concatOperator);
        concatOperator.drawContainer();
    }
});

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    title: "Operator",
    inputCount: 0,
    outputCount: 0,
    defaults: {
        x: 400,
        y: 40,
        leaves: [],
        height: 20,
        width: 120
    },
    drawContainer: function() {
        console.log(this.title); //outputs "Operator" instead of "Concat"
    }
});
new DataMapper.Views.OperatorView();

javascript backbone.js

Answer 1

Answer №1

In the Backbone framework, model attributes are not equivalent to JavaScript object properties. Attributes are stored within the attributes property and can be manipulated using get and set; whereas properties are directly linked to this and accessed through this.property_name.

For instance:

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    title: "Operator"
});

In this case, title is considered a property, not an attribute. On the other hand, if you do this:

DataMapper.Models.OpContainerBox.new({
    title: 'Concat'
});

Backbone will assign the title attribute as 'Concat'.

If you modify your console.log statement like so:

console.log(this.title, this.get('title'));

You'll observe both 'Operator' and 'Concat' displayed in the console.

All default values should be placed in the defaults property, and if any of these defaults are mutable, it's advisable to use a function for defaults to avoid unintentional reference sharing:

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    defaults: function() {
        return {
            title: "Operator",
            inputCount: 0,
            outputCount: 0,
            x: 400,
            y: 40,
            leaves: [],
            height: 20,
            width: 120
        };
    },
    drawContainer: function () {
        console.log(this.get('title'));
    }
});

If a function isn't used for defaults, all instances of OpContainerBox will share the same defaults.leaves array via their prototype.

It's essential to utilize get to retrieve attributes: this.get('title') rather than this.title.

The issue of "reference sharing through the prototype" can also arise with the operators array in the OperatorView, prompting a modification such as:

DataMapper.Views.OperatorView = Backbone.View.extend({
    el: "#op-panel",
    events: {
        "click #concat-op-btn": "addConcatOp"
    },
    initialize: function() {
        this.operators = [ ]; // <---- One distinct array per instance.
    },
    //...
});

Answer 2

In the Backbone framework, model attributes are not equivalent to JavaScript object properties. Attributes are stored within the attributes property and can be manipulated using get and set; whereas properties are directly linked to this and accessed through this.property_name.

For instance:

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    title: "Operator"
});

In this case, title is considered a property, not an attribute. On the other hand, if you do this:

DataMapper.Models.OpContainerBox.new({
    title: 'Concat'
});

Backbone will assign the title attribute as 'Concat'.

If you modify your console.log statement like so:

console.log(this.title, this.get('title'));

You'll observe both 'Operator' and 'Concat' displayed in the console.

All default values should be placed in the defaults property, and if any of these defaults are mutable, it's advisable to use a function for defaults to avoid unintentional reference sharing:

DataMapper.Models.OpContainerBox = Backbone.Model.extend({
    defaults: function() {
        return {
            title: "Operator",
            inputCount: 0,
            outputCount: 0,
            x: 400,
            y: 40,
            leaves: [],
            height: 20,
            width: 120
        };
    },
    drawContainer: function () {
        console.log(this.get('title'));
    }
});

If a function isn't used for defaults, all instances of OpContainerBox will share the same defaults.leaves array via their prototype.

It's essential to utilize get to retrieve attributes: this.get('title') rather than this.title.

The issue of "reference sharing through the prototype" can also arise with the operators array in the OperatorView, prompting a modification such as:

DataMapper.Views.OperatorView = Backbone.View.extend({
    el: "#op-panel",
    events: {
        "click #concat-op-btn": "addConcatOp"
    },
    initialize: function() {
        this.operators = [ ]; // <---- One distinct array per instance.
    },
    //...
});

Ways to define properties in backbone entities

Answer №1

Similar questions

Encountering an issue with Vue JS axios request and filter: the function this.XX.filter is not operational

Determine the card type based on the card number

How can you locate the position of a selector within a parent or set using jQuery

Managing State with Vuex: Storing Getter Results in the State

What is the best way to iterate through multiple iframes?

Using data-image as the source for Bootstrap Modal

How can I implement user-specific changes using Flask?

What is the best way to manage photos from your phone without having to upload them online?

When using Next.js getServerSideProps(), cookies are not accessible on the initial render after a redirect, but they become available upon refreshing the page

What is the best way to ensure a function returning a promise works effectively within a forEach loop?

Adding 7 days to a JavaScript date

What could be causing the browser to become unresponsive when making several AJAX requests to the same ASP.NET MVC action at once?

How should you correctly display the outcome of a mathematical function on a data property in a v-for loop in VueJS?

Updating View in Angular 2 ngClass Issue

Immediate family members nearby are not an option. We will have to create the form dynamically

Measuring data entries within JSON array utilizing JavaScript and Postman

If the window width is less than the specified value, hide the DIV and replace it with a

What could be the reason for the electron defaultPath failing to open the specified directory?

React display

Troubleshooting a LESS compiling issue with my Jade layout in ExpressJS