Best practice for defining variables in a Backbone view

Question

I have a Backbone view that has to deal with a lot of logic. I'm using require.js and I was wondering what the best way of creating variables is for that view. My current set up is like so.

define([
'jquery',
'underscore',
'backbone',
'pixi',
'tweenlite',
'easepack',
'app/models/tower-item-model',
'app/views/tower-item-view',
'app/templates'

], function($, _, Backbone, PIXI, TweenLite, EasePack, TowerItemModel, TowerItemView, Templates){
'use strict';

// ********* create view variables ************

var numberOfTowers = 1;  // this is set by the icons in the top right of the view. Default is 1
var sectionWidth = 180;
var mmToPixelRatio = 180/300;
var currentWidth = 0;
var currentHeight = 0;
var currentDepth = 0;
var frameColourPressed = false;

var hiliteIntensity = 0;
var hiliteUp = true;
var hiliteIntervalID;



var TowerView = Backbone.View.extend({
    id: 'tower-view',
    className: 'tower-view',

am I right in thinking that these variables are currently in the global namespace? If so I imagine that this is not good. I had another view set up like this and the app was creating several instances of it. I noticed that a change in one of the variables to one instance was affecting all of them.

Is there a simpler way of declaring variables so that they are true instance variables?

Many thanks

Answer 1

You can simply add the variable in view class

For example,

var TowerView = Backbone.View.extend(
{
    id: 'tower-view',
    className: 'tower-view',
    currentWidth : 0,
    currentHeight : 0,
    currentDepth : 0,
    frameColourPressed : false,
    setTowerHeight : function()
                     {
                         console.log(this.currentwidth);
                     }
});

These are called true class variables, and they will be different for each instance.