Wie kann ich diesen Javascript-Code unauffällig gestalten?

Question

Wie kann ich diesen Javascript-Code unauffällig gestalten?

Gefragt el 15 de Kann, 2011: Wann wurde die Frage gestellt
328 Ansichten: Anzahl der Besuche der Frage
2 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

<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>

Ich erhalte eine Liste von Filmobjekten von ASP.NET MVC serverseitig und generiere HTML wie oben. Wie Sie sehen können, initialisiere ich auch Javascript-Wickets für jeden dieser Filme, indem ich JSON-Daten und Skript-Tags der Filme verwende.

Ich möchte diese Skript-Tags von HTML und Javascript-Code zu entfernen, um unauffällig zu sein, aber ich weiß nicht, wie das zu tun, weil für jeden Film zu erstellen Wicket ich JSON-Daten benötigen und ohne Rendering Zeit Skript-Tags kann ich nicht sehen, eine Möglichkeit, dies zu tun. Haben Sie eine Idee? Danke

Update Ich möchte, dass mein HTML-Code wie folgt aussieht.

<div id="detailed">
    @foreach (var item in Model.Result.Items)
    {                
        <div id="movie_@(movie.UserMovieID)" class="movie border-gray">
            <!-- Some html code -->
        </div>            
    }
</div>

Und ich möchte, dass mein Javascript-Code wie folgt aussieht.

 $(document).ready(function() {                
    //init all movie wickets               
 });

Gefragt el 15 de Kann, 2011 von caltuntas

Answer 1

2 Antworten

Answer 2

2voto

Groo Punkte 47623

Eine bessere Möglichkeit für Benutzer, die kein JavaScript aktiviert haben, aber dennoch Filmdetails für jeden Artikel sehen möchten, wäre es, diese Details als HTML-Elemente darzustellen und sie dann auszublenden, wenn JavaScript verfügbar ist.

Zum Beispiel würden Sie Ihr HTML so darstellen, dass es etwa so aussieht:

<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>

Dann durchlaufen Sie die Elemente und ersetzen die divs durch alles, was Sie wollen:

$(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'));
    };

});

Dies ermöglicht Nutzern ohne JavaScript eine etwas verschlechterte Darstellung, aber alle Daten sind weiterhin vorhanden.

Beantwortet el 15 de Kann, 2011 von Groo (47623 Punkte )

Answer 3

1voto

sled Punkte 14307

Ich würde es folgendermaßen machen:

Setzen Sie nur ein Skript-Tag in die <head></head> Teil, in dem Sie ein JSON-Array mit allen Filmen darin initialisieren (auf der Serverseite) wie:

var movies = '[{"userMovieID": "123", ...}, {"userMovieID": "432", ...}]';
wenn das Dokument fertig ist, sollten Sie mit der Erstellung der Widgets beginnen, indem Sie zuerst das json-Array analysieren und dann durch das Array der Filme iterieren, dann ein Widget für jeden Film erstellen und einfügen
```
<div id="movie_@(movie.UserMovieID)" class="movie border-gray">
    
</div>
```

zu Ihrem <div id="detailed">..</div> Vielleicht möchten Sie Javascript-Templates verwenden, wie jquery-tmpl

Die beste Lösung wäre, wenn Ihre Widget-Klasse "InitMovieWicket" die <div id="movie_"..>...</div> Eintrag.

Beantwortet el 15 de Kann, 2011 von sled (14307 Punkte )

Wie kann ich diesen Javascript-Code unauffällig gestalten?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich diesen Javascript-Code unauffällig gestalten?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: