Search code examples
jqueryjavascriptmvc

Question about events in javascriptmvc

I've been messing around with javascriptmvc. After getting data from the model, the view generates html similar to the following

<ul>
 <li><a href="javascript://" class=".dosomething">link 1</a></li>
 <li><a href="javascript://" class=".dosomething">link 1</a></li>
 <li><a href="javascript://" class=".dosomething">link 1</a></li> 
</ul>

In my controller I hook up the click event to the links with the following code

'.dosomething click': function( el ){
alert('hey');
var example = el.closest('.example').model();
alert(example);

}

The event fires, but 'var example' is undefined.

I started out by creating the basic code using a scaffold command and have been modifying things to see if I understand it, which I'm apparently failing to :).

Can someone explain how this line

var example = el.closest('.example').model();

is supposed to work, and what el is (it's type). Is it just an html element?

I've been reading all the documentation I could find, but no luck so far. Thanks for your help!

Solution

  • If you ask questions on JMVC's forum, you'll be MUCH more likely to get an asnswer.

    The problem is that you aren't hooking up example model instances on the li. Your view should have something like:

    <li <%= examples[i] %> >

    That adds the model to jQuery data and adds the example css, allowing .model() to work.

    .closest(SELECTOR) finds the first parent element that matches selector. This should be the element that has the model data.