Using the MVC helpers and a javascript IIFE

[Bob]

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. 

[Petur Subev]

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

 

 

[Bob]

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. ;(

[Petur Subev]

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

 

 

[Bob]

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.