JSFiddle - React, Tailwind, and code Playground

by BrianGenisio

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<input type="button" value="Add a new Parent Model instance" id="add">

CSS

.box {
    height: 50px;
    width: 300 px;
    border: 1px solid black;
}

JavaScript

var ParentModel = Backbone.Model.extend({
    defaults: function() {
        return {nestedModel: new NestedModel()};
    }
});


var NestedModel = Backbone.Model.extend({
    defaults: function() {
        return {
        "propertyA" : {
                        "defaultValue" : "ABC",
                        "userValue": null
                      }
        };
    }
});

var ParentView = Backbone.View.extend({
    initialize: function(){
        var self = this;
        var defaultValue = self.model.get("nestedModel").get("propertyA")["defaultValue"];
        var userValue = self.model.get("nestedModel").get("propertyA")["userValue"];
        
        var div = $("<div class='box'>defaultValue = <span id='defaultValue'>" + 
                    defaultValue+ "</span>, userValue = <span id='userValue'>" + 
                    userValue + "</span></div>");
        var divButton = $('<input type="button" value="Change my userValue to DEF">')
            .click(function(){
            temp = self.model.get("nestedModel").get("propertyA");
            temp.userValue = "DEF";
            //wherewas my intention is just to set the userValue for a particular instance,
            //generating another instance of ParentView (by clicking button) reveals that
            //the userValue is set even for new instances.
            //How can I change it such that I only change the userValue of the particular
            //instance?
            
            //set value
            self.model.get("nestedModel").set({"propertyA": temp});
                
            //update userValue in View
            userValue = self.model.get("nestedModel").get("propertyA")["userValue"];
            $(this).parent().find("span#userValue").text(userValue);    
        });    
        
        //append divButtont to div
        div.append(divButton)
        
        //append div to body
        $('body').append(div)
    },
});
 
$("#add").click(function(){
    var newBoxView = new...