Home/ Questions/Q 8691089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:03:03+00:00

I’m a newbie at Backbone.js and am coming across a scope issue with a

  • 0

I’m a newbie at Backbone.js and am coming across a scope issue with a simple view & model scenario.

I’ve created a simple model with a single default “score” value. I also created a simple view containing a template rendered value of “score” and a button to increment score by one on each press. The view repeats the render every time the score value is changed.

I’ve got this to work but in a way that I think may be a botch. The template will only render the first time unless I cache the value of “this” in view variable “thisView”. If I don’t it seems to lose focus and the rendering errors. Is this a good idea? Or am I missing something about repeatedly applying the render.

Thanks for any advice

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
       #view_container{background-color: rgba(12, 5, 11, 0.14);width: 100px;height: 100px;padding: 10px;}
    </style>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

<!-- View Template -->
<script type="text/template" id="view-template">
    <div class="profileSpace">
        <p>Score: <%= score %></p>
    </div>
    <button id="increaseScoreButton">Increase Score</button>
</script>

<div id="view_container"></div>

<script type="text/javascript">
(function ($) {


MyModel = Backbone.Model.extend({
    defaults:{
        score:0
    },
    initialize: function(){

    },
    increaseScore: function(){

        //Increase Score by 1

        var currentScore = this.get("score");

        var newScore = currentScore +1;

        this.set({score:newScore});

    }
});

MyView = Backbone.View.extend({

        el: $("#view_container"),

        template: _.template($('#view-template').html()),

        initialize: function(model){

                thisView =this;

                this.model.bind('change', this.render, this);

                this.render();

            },
        events: {

            "click #increaseScoreButton":  "increaseScore"

        },

        increaseScore: function(){

            this.model.increaseScore();

        },
        render: function(){

            var currentScore = thisView.model.get("score");

            var html = thisView.template({"score":currentScore});

            $(thisView.el).html( html );
            return thisView;
        }
    });

myModel = new MyModel;
myApp = new MyView({model:myModel});

})(jQuery);

</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You bind the change event via this.model.bind('change', this.render, this);

    This syntax was introduced in Backbone 0.5.2 but you use Backbone 0.3.3 in your example.

    0.5.2 — July 26, 2011
    The bind function can now take an optional third argument to specify the this of the callback function.

    Upgrade Backbone to a more recent version (0.9.2 as of today) and you should get the expected behaviour.

    Or, as CoryDanielson pointed out in the comments, you could use _.bindAll to have a guaranteed context:

    MyView = Backbone.View.extend({
    initialize: function(model) {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.render();
    },

    render: function(){
        var currentScore = this.model.get("score");
        var html = this.template({"score":currentScore});
        $(this.el).html( html );
        return this;
    }
});
    • 0