Backbone.js changedAttributes Model

Last Updated : 12 Dec, 2022

The Backbone.js changedAttributes Model is the function that returns the hash which is the difference in attributes and their values in the current model and model before the change. It returns false if there is no change made in the model. This function helps to figure out which portions of a view should be changed.

Syntax:

model.changedAttributes( attributes );

Parameters:

attributes: It is the attribute of the model.

Example 1: In this example, we will illustrate The Backbone.js changedAttributes Model and get all the updated attributes and values.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS changedAttributes Model</title>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>BackboneJS changedAttributes Model</h3>
    <script type="text/javascript">
        var m = new Backbone.Model({
            att1: 'a',
            att2: 'b',
            att3: 'c'
        });
 
        m.on('change', function () {
            document.write("Changes are ",
                JSON.stringify(m.changedAttributes()));
        });
        m.set({
            att1: 'd',
            att3: 'e',
        });
    </script>
</body>
 
</html>

Output:

Backbone.js changedAttributes model

Changes attribute of Model stores the same values as changedAttributes. Now let see if didn’t change any thing in the model than what changes attribute store and what changedAttributes stores.

Example 2: In this example, we will see changedAttributes with new attributes and without any change in the model.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS changedAttributes Model</title>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>BackboneJS changedAttributes Model</h3>
    <script type="text/javascript">
        var temp = new Backbone.Model({
            att1: 'a',
            att2: 'b',
            att3: 'c'
        });
 
        temp.on('change', function () {
            document.write("It return new attributes ",
                JSON.stringify(temp.changedAttributes()));
        });
        temp.set({
            attr4: 'f',
            attr5: 'g'
        });
 
        var tem2 = new Backbone.Model({
            attA: '1',
            attB: '2',
        });
 
        document.write(`<br><h3>Change Attributes with 
            any change return</h3>`);
        document.write(`Change in Model with any changed 
            attribute returns ${JSON.stringify(tem2.changed)}`);
        document.write(`<br>Change in Model with 
            changeAttribute returns ${tem2.changedAttributes()}`); 
    </script>
</body>
 
</html>