Results 1 to 8 of 8

Thread: Best Practice for JavaScript-calling Hyperlinks in Ext

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    73

    Default Best Practice for JavaScript-calling Hyperlinks in Ext

    For arbitrary hyperlinks in my application that call a JavaScript function, I've been using the following syntax:

    Code:
    <a href="javascript:myFunction();void(0);">My Action</a>
    Although this works, I'm sure it is really bad practice and not at all in keeping with the object-oriented principals of ExtJS and Prototype. What exactly is best practice for creating hyperlinks that execute some JavaScript function, bearing in mind that these may be written using an XTemplate, e.g:

    Code:
    var t = new Ext.XTemplate(
        '<h2>{name}</h2>',
        '<a href="javascript:logout();void(0)">Logout</a>'
    );

  2. #2
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501

  3. #3
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501

    Default

    You are correct in thinking that its a bad idea to add event handlers inline.

    Event delegation is the best thing since sliced cheese!

    Give it a try, and if you have any questions, post them back here and we will try to help.

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    73

    Default

    Thanks VinylFox, I knew there was a better way

    Event delegation looks like a fantastic way of dealing with multiple similar links inside grids, unordered lists etc. I'll definitely employ this technique in some of my code.

    However, when you just want a single link, having the link separated from the anchor tag makes the code a little less readable and easy to follow:

    Code:
    var t = new Ext.XTemplate(
        ...lots of markup...
        '<a href="#" id="logout-link">Logout</a>',
        ...lots more markup...
    );
    
    //Somewhere further down in the code, possibly a long way down
    Ext.get('logout-link').on('click', logout);
    To make the code more readable, is this acceptable coding practice?:
    Code:
    var t = new Ext.XTemplate(
        ...lots of markup...
        '<a href="#" onclick="logout();">Logout</a>'
        ...lots more markup...
    );


    Or is that a serious slapped wrist coding offence?
    Grateful for your thoughts

  5. #5

    Default

    Quote Originally Posted by wwarby View Post
    However, when you just want a single link, having the link separated from the anchor tag makes the code a little less readable and easy to follow:

    Code:
    var t = new Ext.XTemplate(
        ...lots of markup...
        '<a href="#" id="logout-link">Logout</a>',
        ...lots more markup...
    );
    
    //Somewhere further down in the code, possibly a long way down
    Ext.get('logout-link').on('click', logout);
    To make the code more readable, is this acceptable coding practice?:
    Code:
    var t = new Ext.XTemplate(
        ...lots of markup...
        '<a href="#" onclick="logout();">Logout</a>'
        ...lots more markup...
    );

    Or is that a serious slapped wrist coding offence?
    Grateful for your thoughts
    The problem with the latter approach will be scope.

    If you are wrapping your app in an onReady anonymous function (which you should be),
    logout() will not be found at time of invocation (click).

    Your point about readability is best answered as:
    You're already doing something much more followable (maintainable),
    by separating presentation and logic, so physical separation of code
    tying the two together is the lesser of two annoyances(tm).

    --dan

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    73

    Default

    Thanks dantheman

    Really appreciate the help here because it will certainly help me to avoid potential problems further down the line. I'll do it the right way from the outset.

  7. #7
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501

    Default

    Nicely said dan.

    Something that I noticed about your code sample was that you gave an 'id' in your template, which must be unique. Now thats all good and fine if you only use that template once, but if thats the case then im not sure why you would need to use a template. Typically templates are used when you re-using an html fragment to render a few (or many) records of data.

    So on that same note...
    Code:
    var t = new Ext.XTemplate(
        ...lots of markup...
        '<a href="#" class="logout-link">Logout</a>',
        ...lots more markup...
    );
    
    //Somewhere further down in the code, possibly a long way down
    Ext.select('.logout-link').on('click', logout);
    Selecting and applying the listener by class name would be the way to go if you have multiple records of data using that template. Of course you would also need some bit of unique info in the template as well, such as a username, or something to identify it.

    So are you rendering a single record, or many records?

  8. #8
    Sencha User
    Join Date
    Jun 2008
    Posts
    73

    Default

    In this particular case, I'm rendering a single record. Not even a record actually, just a custom object. Specifically, a user, which has a number of custom properties, including some arrays, like groups they belong to and permissions they have, some of which I wanted to churn out to the screen. A template just seemed like the easiest way to go because of the nifty <tpl> feature.

    In other cases I will be calling templates several times and then I will need the method you have just described - thanks for the code sample.

    I think I'm all set now, and confident about the correct approach to creating links. Mine is a fairly substantial project, and I didn't want to set off using bad coding practices. Thanks a bunch for all the really quick and thorough help guys - I wish all my threads got such a positive response!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •