2010-02-18 2 views
0

Я изучаю структуру прототипа и javascript вообще и пытаюсь реорганизовать немного существующего кода, чтобы создать некоторый html из данных внутри класса с помощью прослушивателя событий. У меня возникают проблемы с запуском событий и получением соответствующего кода слушателя. Вот небольшой пример, который я не могу получить работу:проблема с прослушивателями событий и прототипами prototypejs

<html> 
<head> 
    <title>Event Test</title> 
    <script type="text/javascript" src="prototype.js"></script> 

    <script type="text/javascript"> 
     MyClass = Class.create({ 
      initialize: function(args) { 
       this.div_id = $(args['div_id']); 
      }, 
      test: function() { 
       this.div_id.fire('ag:test'); 
      } 
     }); 

     var myclass = new MyClass({div_id:'test'}); 

     $('test').observe(myclass, 'ag:test', function(evt){ 
      $('test').insert('<p>Test</p>'); 
     }); 


     myclass.test(); 
    </script> 
</head> 

<body> 
    <div id="test"> 
    </div> 
</body> 

Мое намерение состоит в том, что я просто хочу добавить немного HTML в DIV при создании экземпляра класса, или когда некоторые другой класс называется классом. Сейчас этот код ничего не делает. Используя firebug, кажется, что мой класс никогда не создается здесь. Я смотрел примеры и прототипы документов, но не могу понять, что я делаю неправильно.

Спасибо!

EDIT: Изменено, чтобы не запускать событие в конструкторе класса.

ответ

0

Получил это! Это была проблема с отложенной загрузкой. В исходном вопросе у меня был весь javascript, определенный в заголовке. Это было неудачно, потому что, когда я использую $ ('test'), элемент еще не существует. Правильный код будет выглядеть так:

<html> 
<head> 
    <title>Event Test</title> 
    <script type="text/javascript" src="prototype.js"></script> 

    <script type="text/javascript"> 
     MyClass = Class.create({ 
      initialize: function(args) { 
       this.div_id = $(args['div_id']); 
      }, 
      test: function() { 
       this.div_id.fire('ag:test'); 
      } 
     }); 


    </script> 
</head> 

<body> 
    <div id="test"> 
    </div> 

    <script type="text/javascript"> 
     var myclass = new MyClass({div_id:'test'}); 

     $('test').observe('ag:test', function(evt){ 
      $('test').insert('<p>Test</p>'); 
     }); 


     myclass.test(); 
    </script> 
</body> 

+0

Нет последней из-за «ранней» загрузки вашего скрипта, но ваша основная проблема заключалась в том, что механизм совершенно неактуальен. Также вы даже не поддержали мой ответ, хотя это была ваша «настоящая» проблема. Поэтому от меня больше не будет ответов от меня. Позаботьтесь ... – BYK

+0

Я даже не понял ваш первоначальный ответ. Мой код также прошел 3 пересмотра, прежде чем я пришел сюда. Я не использую механизм совершенно неактуальным образом. Это небольшая часть того, что я пытаюсь сделать, и это разделяет создание элементов html во внутренней работе этого класса. это была уменьшенная версия проблемы, так как я не могу опубликовать реальный код здесь. Исходный код выполнялся в файле deffered_javascript_block. Единственная реальная проблема с исходным кодом заключалась, как вы сказали, в том, что я запускал событие из инициализатора, который был исправлен. – Casey

+0

Думаю, вам следует расслабиться и успокоиться. Как насчет флага вместо голосования? Я даже не принял ответа. Откуда вы знаете, что я бы не проголосовал за вас? – Casey

1

Вы слушаете тестовое событие #test div's: тестовое событие, но запускаете событие в классе, поэтому абсолютно нормально, что ничего не происходит. Вы должны прослушивать события класса, который вы создаете, но тогда вы не можете поймать событие создания, так как вы не можете присоединить обработчики событий до того, как класс будет создан. Поэтому вам нужно найти другой способ.

+0

могли бы вы рассказать немного больше? – Casey

+0

только что отредактировал мой код с частью вашего ответа. – Casey

+0

Вы все еще делаете очень неправильно. Вы должны слушать только что созданный класс для событий. Что-то вроде Event.observe (myclass, 'ag: test', function (e) ...); – BYK

Смежные вопросы