This is a migrated thread and some comments may be shown as answers.
Using the MVC helpers and a javascript IIFE
4 Answers 17 Views
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 14 Nov 2014, 05:15 PM
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. 

4 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 18 Nov 2014, 04:56 PM
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.

 
0
Bob
Top achievements
Rank 1
answered on 18 Nov 2014, 05:36 PM
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. ;(

0
Petur Subev
Telerik team
answered on 20 Nov 2014, 09:25 AM
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.

 
0
Bob
Top achievements
Rank 1
answered on 20 Nov 2014, 06:29 PM
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.
Asked by
Bob
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Bob
Top achievements
Rank 1
Share this question
or