다른보기를 동일한보기에서 호출

Question

2 분짜리 자바 스크립트 타이머를 사용하는 간단한 게임을 만들고 있습니다. 백본을 사용하지 않고도 자바 스크립트 타이머를 사용할 수 있습니다. 이 코드는 작업 타이머의 맨 아래에 있습니다. 여기에 그것의 바이올린이 있습니다. http://jsfiddle.net/mjmitche/hDRjR/19/

그러나 일단 타이머 코드를 백본보기 내부의 몇 가지 다른 방법으로 시도하면 방법에 따라 오류가 발생합니다. 중요한 방법은, displayTime이 코드가

단계를 정의한다 :

1) 나는 새로운 clockView을 만들고 clockview의 초기화 내부 변수 clock_view

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

에 저장, 나는이 설정 에 의해 사용되는 변수 타이머 코드

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

startClock 방법은 displayTime 방법 초마다 호출하여 setInterval을 사용하여 다른

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

startClock에서 트리거됩니다. displayTime이 어떻게 코딩되었는지에 따라 displayTime(), b) this.displayTime(), c) clock_view.displayTime()], displayTime이 다른 오류를 발생시킵니다. displayTime이 displayTime()로 setInterval을 호출하는 경우

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); 


    }, 

는 그것이 정의되지 말한다. this.displayTime()을 수행하면 개체 창에 메서드가 없습니다. 내가 clock_view.displayTime()를 호출하면, 내가 변수가 초기화에 정의 된 방법이 displayTime이

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); 
    }, 

업데이트처럼 직접 startClock 아래에 정의되어 있기 때문에 발생할 수 있습니다 생각 NAN 오류를 트리거

이벤트를 트리거하는 모델과 같이 프로그램의 다른 부분이 없어서 작동하지 않지만 전체 ClockView를 백본 형식으로 처리합니다. 난 단지 더 읽기 질문을 만들기 위해 그것을 포함하고있어

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

원래 작업 시계 코드 http://jsfiddle.net/mjmitche/hDRjR/19/

var에 displayTime = 함수() { VAR 분 = Math.floor (secondsRemaining/60); var 초 = seconds 복원 - (분 * 60); if (초 < 10) 초 = "0"+ 초; var time = minutes + ":"+ 초; $ ('# timer') .html (time); }; $ ('# timer'). css ('marginTop', 0);

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

Answer 1

이렇게하면됩니다. 중요한 점은 변수가 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> 

보기 :

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();