CODEWITHSUNDEEP
backbone.js
BrainLikeADullPencil
BrainLikeADullPencil

Reputation: 11653

calling another method inside same view

I making a simple game that uses a two minute JavaScript timer. I can get the javascript timer to work without using backbone. The code is at the bottom for the working timer, and here's a fiddle of it http://jsfiddle.net/mjmitche/hDRjR/19/

However, once I try to the timer code into a few different methods inside a Backbone view, I'm getting an error depending on how a key method, displayTime, code is defined

Steps:

1) I create a new clockView and save it to a variable clock_view

var clock_view    = new ClockView({ model: game});

Inside the initializer of clockview, I set up these variables that are used by the timer code

var totalWait = 120;
var secondsRemaining = totalWait;
var hasFocus = true;
var hasJustFailed = false;

The startClock method gets triggered from elsewhere

 this.model.bind("gameStartedEvent", this.startClock, this);

startClock uses setInterval to call displayTime method every second. Depending on how displayTime is coded [a) displayTime(), b) this.displayTime(), c) clock_view.displayTime() ], displayTime triggers a different error. 

startClock: function(){
      console.log("start clock");

      setInterval(function(){
      this.secondsRemaining -= 1;
      console.log("working");
      displayTime();  //uncaught reference error: displayTime is not defined
      this.displayTime(); //Uncaught TypeError: Object [object Window] has no method 'displayTime' 
      clock_view.displayTime();// `display time gets called but triggers NAN`
      if(secondsRemaining == 0) $('#timer').fadeOut(1000);
      }, 1000);


    },

If displayTime is called from setInterval as displayTime() it says it's not defined. If I do this.displayTime(), I get a object window has no method. If I call it clock_view.displayTime(), it triggers a NAN error, which I think may be caused because the way the variables are defined in the initializer displayTime is defined directly below startClock like this

displayTime:  function () {
        var minutes = Math.floor(secondsRemaining / 60);
        var seconds = secondsRemaining - (minutes * 60);
        if (seconds < 10) seconds = "0" + seconds;
        var time = minutes + ":" + seconds;
        $('#timer').html(time);
    },

Update

This is a fiddle of the whole ClockView in a Backbone format, although it doesn't work because it's missing other parts of the program (such as the model that triggers the event). I'm including it only to make the question more readable

http://jsfiddle.net/mjmitche/RRXnK/85/

Original working clock code http://jsfiddle.net/mjmitche/hDRjR/19/

var displayTime = function () { var minutes = Math.floor(secondsRemaining / 60); var seconds = secondsRemaining - (minutes * 60); if (seconds < 10) seconds = "0" + seconds; var time = minutes + ":" + seconds; $('#timer').html(time); }; $('#timer').css('marginTop', 0);

setInterval(function(){
    secondsRemaining -= 1;
    displayTime();
    if(secondsRemaining == 0) $('#timer').fadeOut(1000);
}, 1000);

Upvotes: 0

Views: 907

Answers (1)

Dennis Rongo
Dennis Rongo

Reputation: 4611

This should work. The main points are, how variables are accessed inside the View.

HTML:

<div id="view">
    <div id="timer"> 
        <span class="time">2:00</span>
    </div>
    <div id="options">
        <input type="button" class="action_button" value="New Game" id="new_game">
    </div>
</div>

View:

var ClockView = Backbone.View.extend({
el: '#view',
initialize: function () {
    /** Define your variables in this View */
    this.totalWait = 120;
    this.secondsRemaining = this.totalWait;
    this.hasFocus = true;
    this.hasJustFailed = false;
},
events: {
    'click #new_game' : 'startClock' /** The button starts the clock */
},
startClock: function () {
    console.log("start clock");
    var self = this; /** Save 'this' to a local variable */
    setInterval(function () {
        self.secondsRemaining -= 1;

        self.displayTime();
        if (self.secondsRemaining == 0) self.$('#timer').fadeOut(1000);
    }, 1000);
},
displayTime: function () { 
        var minutes = Math.floor(this.secondsRemaining / 60);
        var seconds = this.secondsRemaining - (minutes * 60);
        if (seconds < 10) seconds = "0" + seconds;
        var time = minutes + ":" + seconds;
        this.$('#timer').html(time);
    },
});

var clock_view = new ClockView();

Upvotes: 2

Related Questions