Using the MVC helpers and a javascript IIFE

5 posts, 0 answers
  1. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 14 Nov 2014 Link to this post

    As we all know using an IIFE (immediately-invoked function expression) is all the rage these days and a best practice for isolation of javascript code from the dreaded global scope. 

    We are creating a dashboard in which it is possible the same widget is placed on the dashboard twice by the user. So, the js has to be isolated to prevent collisions. 

    One issue we had was that when we provide a Data("FunctionName") function name to a grids datasource since the helper renders the script inline if the function was declared in the IIFE a js undefined error occurs. This issue would also occur with any event handlers that you set up with the grid. 

    One possible work around could be to have the IIFE (really now using the revealing module patter) given a name. But, still, this would mean putting the js into the razor view and somehow coming up with a unique name for that instance of the views function and prefixing the event handlers with it. But, I really don't like this because the js in the view isn't minified and cached.

    Other than moving to client side configuration, basically nullifying the benefit of the MVC helpers, is there any possible way this could work? Perhaps the helper could somehow allow you to render the HTML separately from the js? Even that wouldn't be perfect since then all the js would have to be in the razor view.

    Any other ideas or considerations. 
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 18 Nov 2014 Link to this post

    Hello Bob,

    The MVC wrappers are not that flexible, however I am not sure I understand the exact issue, could you please clarify your question? Give us a small example scenario so we can see if there is a way to fix it?.

    Splitting the HTML from the JavaScript is possible with the deferred initialization approach:

    http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#deferred-initialization

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 18 Nov 2014 in reply to Petur Subev Link to this post

    Hmm... I think deferred execution will get me there, as long as I put the js code into the view. 

    So, here is the problem. I have a view and the view loads a .js file where I want to put the event handlers. The js uses IIFE to isolate the code to avoid global scope and possible name collisions:

    (function(){
       var onDataBound = function() { alert("Data bound!") }
       var onChange = function() { alert("Change fired!")}
    }());

    Now, the js rendered by the helper in the view that perhaps looks like this:

    .DataSource(dataSource => dataSource
       .Ajax()
       .Read(read => read.Action("Read", "Home"))
       .Events(events => events
          .Change("onChange")
          .DataBound("onDataBound")
       )
    )

    The onChange and onDatabound won't exist. 

    I'm not sure there is anyway for you to fix this. ;(

  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Nov 2014 Link to this post

    Hello Bob,

    The functions should be defined globally (like shown here) the "window" scope or you can use separate namespace and specify them in dot notation:

    e.g.

    window.myKendoFunctions = {
         someFunction: function () {
               //....todo
         },
         someOther: function () {
               //....todo
         }
    }

    .DataSource(dataSource => dataSource
       .Ajax()
       .Read(read => read.Action("Read", "Home"))
       .Events(events => events
          .Change("myKendoFunctions.someFunction")
          .DataBound("myKendoFunctions.someOther")
       )
    )

    I hope this gives you the idea

    Kind Regards,
    Petur Subev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 20 Nov 2014 in reply to Petur Subev Link to this post

    As I expected the answer is "don't do that".

    But, that doesn't solve the problem. ;) The deferred thing will work, but it means I have to put the js into the view. 

    So, lessor of two evils. That all said, I solved this a different way.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready