How can I make this Javascript code unobtrusive?
<div id="detailed">
@foreach (var item in Model.Result.Items)
{
<div id="movie_@(movie.UserMovieID)" class="movie border-gray">
<!-- Some html code -->
</div>
<script type="text/javascript">
new InitMovieWicket(@(MvcHtmlString.Create(movie.ToJSon())),"movie_@(movie.UserMovieID)");
</script>
}
</div>
I am getting list of movie objects from ASP.NET MVC server-side and generating html like above. As you can see , I am also initializing javascript wickets for each of these movies by using movies's JSON data and script tags.
I want to remove these script tags from html and javascript code to be unobtrusive but I dont know how to do that because for each movie to create wicket I need JSON data and without rendering time script tags I cannot see a way to do this. Do you 开发者_如何转开发have any idea ? Thanks..
Update I want want my html code to look like this.
<div id="detailed">
@foreach (var item in Model.Result.Items)
{
<div id="movie_@(movie.UserMovieID)" class="movie border-gray">
<!-- Some html code -->
</div>
}
</div>
And I want my Javascript code to look like this.
$(document).ready(function() {
//init all movie wickets
});
A potentially better way, for users which don't have JavaScript enabled but still want to see movie details for each item, would be to actually render those details as HTML elements, and then hide them if JavaScript is available.
For example, you would render your HTML to look something like:
<div id="detailed">
<div id="movie_@1234" class="movie border-gray">
<div class="wicketData title">Some title</div>
<div class="wicketData year">Year</div>
<div class="wicketData synopsis">Some other stuff</div>
</div>
</div>
And then iterate through the elements and replace divs with anything you like:
$(doument).ready(function() {
// get the parent div
var $detailedParent = $("#detailed");
// get a list of all movie class divs
var $items = $detailedParent.find(".movie");
$.each($items, function(i) {
// get the movie div
var movie = $items[i];
// get all wicket data
var data = movie.find(".wicketData");
// prepare the JSON data using DOM
var movieData = {
title = data.children("title").text(),
year = data.children("year").text(),
synopsis = data.children("synopsis").text()
};
// remove or hide dummy elements
data.remove();
// init your wicket
new InitMovieWicket(movieData, movie.attr('id'));
};
});
This will allow users without JavaScript to get a bit degraded presentation, but all the data will still be there.
here's how I'd do it:
Put only one script tag in the
<head></head>part where you initialize an JSON array with all the movies in it (on the server side) like:var movies = '[{"userMovieID": "123", ...}, {"userMovieID": "432", ...}]';
when the document is ready, you should start building the widgets by first parsing the json array and then iterating through the array of movies, then create a Widget for every movie and insert
<div id="movie_@(movie.UserMovieID)" class="movie border-gray"> <!-- Some html code --> </div>
to your <div id="detailed">..</div>, maybe you want to use Javascript Templates like jquery-tmpl
The best solution would be if your widget class "InitMovieWicket" creates the <div id="movie_"..>...</div> entry.
加载中,请稍侯......
精彩评论