Reputation: 7804
I have partials that get rendered as part of a complex page composition.
Some of these partials need some jQuery OnDocumentReady goodness to seed list data etc. There can be many of these partials chosen during a render (it's very dynamic)
in my _Layout I have a section definition that looks like this
<script src="http://my/fav/cdn/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
@RenderSection("OnDocumentReadySection", false)
});
</script>
in my partials I want to write something like this
@section OnDocumentReadySection{
$('#partial-1').init();
}
and have the result of the page render end up with something like this
<script src="http://my/fav/cdn/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$('#partial-1').init();
$('#partial-2').init();
$('#partial-3').init();
$('#partial-n').init();
});
</script>
This is to make sure all my javascript is at the bottom of the rendered html which I am told is far more optimal.
Upvotes: 2
Views: 745
Reputation: 16025
Instead of:
jQuery(function($) {
$('#partial-1').init();
$('#partial-2').init();
$('#partial-3').init();
$('#partial-n').init();
});
You should instead assign each of them a common css class (even if you don't define a definition for it) and then do this in the head:
jQuery(function($) {
$('.classname').init();
});
Or if need be:
jQuery(function($) {
$('.classname').each(function(){ $(this).init(); });
});
Upvotes: 1