2011-03-09 3 views
0

Ok après un jour j'ai réussi à affiner le problème à 2 lignes de code. Peut-être que j'essaie d'utiliser incorrectement cette déclaration.gratter ma tête sur "cette" déclaration en javascript. n'importe qui aide s'il vous plaît

 function scheduleItemView(myId){ 
      this.update = function(show){ 
       document.getElementById(this.id+'-title').innerHTML = show.title +": "+ show.startDate; 
       document.getElementById(this.id+'-title-overlay').innerHTML = show.title +": "+ show.startDate; 
       document.getElementById(this.id+'-description').innerHTML = truncate(show.description,190); 
       document.getElementById(this.id+'-time-start').innerHTML = show.startTime; 
       document.getElementById(this.id+'-time-end').innerHTML = show.endTime; 
      }; 
      this.id=myId; 
      return true; 
     } 

     function nowNextView(){ 
      this.now = new scheduleItemView('now'); 
      this.next = new scheduleItemView('next'); 
      this.update = function(type,args){ 
       var myshow=args[0]; 

    // problem is below. I have to use the global name to access the update method. 
        myNowNextView.now.update(myshow.now); 
        myNowNextView.next.update(myshow.next); 

    // whereas what I want to do is reference them using the "this" command like below. 
    // this.now.update(myshow.now); 
    // this.next.update(myshow.next); 
    // the above doesnt work. The update method in scheduleItemView is not seen unless referenced globally 
    // BUT even more infuriating, this.now.id does return "now" so it can access the object, just not the method 
    // any ideas? 

      }; 
     } 
objet

est alors instancié avec

var myNowNextView = new nowNextView(); 

puis je lance la méthode:

myNowNextView.update(stuff); 

J'ai essayé de décrire le problème dans le corps du programme. Aucune erreur dans le code n'a été levée, et j'ai dû faire un essai avant de me dire à contrecoeur qu'il ne pouvait pas trouver la méthode. La conception est-elle imparfaite? Est-ce que je ne peux pas faire ça? Un grand merci à l'avance, Steve

+0

En fait, il semble que cela devrait fonctionner. Si vous appelez 'myNowNextView.update()', alors 'this' dans' update' se référera à 'myNowNextView'. –

Répondre

0

Je pense que vous pourriez vraiment bénéficier d'étudier les fermetures un peu en javascript. Il semble que vous essayez d'appliquer une approche OO traditionnelle aux objets js, et cela ne vous donnera pas les résultats que vous attendez.

Je recommande la lecture sur ce poste pour un moyen facile d'utiliser des fermetures: http://howtonode.org/why-use-closure

Quelque chose comme ceci:

<html> 
<head> 
<script type="text/javascript"> 

    function createScheduleItemView(myId){ 

    var _show = false 

    return { 
     setShow : function setShow(show) { 
      _show = show 
     }, 
     update : function update(){ 
      document.getElementById(myId +'-title').innerHTML = _show.title; 

     } 
     } 

    } 

    function createNowNextView(){ 

     var _now = createScheduleItemView('now'); 
     var _next = createScheduleItemView('next'); 

     return { 
      publicVar : "Example", 
      update : function update(args) { 
       var myshow=args[0]; 
       _now.setShow(myshow.now) 
       _now.update(); 
       _next.setShow(myshow.next) 
       _next.update(); 
      } 

     }; 
    } 

    function runIt() { 
     nowNextView = createNowNextView() 
     args = [] 
     showArgs = { 
      now : {title : "Beauty and the Beast"}, 
      next : {title: "I did it myyyyyy way"} 
     } 
     args.push(showArgs) 
     nowNextView.update(args) 

     //Private variables can not be accessed 
     //console.log(nowNextView._now) 
     //undefined 
     // 
     //But anything you return in the object is public 
     //console.log(nowNextView.publicVar) 
     //Example 

    } 


</script> 
</head> 
<body onload="runIt()"> 

<h3>Now Showing:</h3> 
<p id="now-title"></p> 

<h3>Up Next:</h3> 
<p id="next-title"></p> 

</body> 
</html> 
+0

Aussi pour une discussion complète, vous pouvez voir: http://howtonode.org/what-is-this et http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object- in-javascript –

0
function scheduleItemView(myId){ 
this.update = function(show){ 
    document.getElementById(this.id+'-title').innerHTML = show.title +": "+ show.startDate; 
    document.getElementById(this.id+'-title-overlay').innerHTML = show.title +": "+ show.startDate; 
    document.getElementById(this.id+'-description').innerHTML = truncate(show.description,190); 
    document.getElementById(this.id+'-time-start').innerHTML = show.startTime; 
    document.getElementById(this.id+'-time-end').innerHTML = show.endTime; 
}; 
this.id=myId; 
} 

function nowNextView(){ 
var myshow=args[0]; 
var scope = this; 
this.now = new scheduleItemView('now'); 
this.next = new scheduleItemView('next'); 
this.update = function(type,args){ 
     scope.now.update(myshow.now); 
     scope.next.update(myshow.next); 
}; 
} 
Questions connexes