Как я могу сделать этот код Javascript ненавязчивым? - PullRequest
Новая
       6

Как я могу сделать этот код Javascript ненавязчивым?

2 голосов
/ 15 мая 2011 
<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>

Я получаю список объектов фильма из серверной части ASP.NET MVC и генерирую HTML, как описано выше. Как видите, я также инициализирую калитки javascript для каждого из этих фильмов, используя данные JSON фильмов и теги сценариев.

Я хочу удалить эти теги сценариев из html и javascript-кода, чтобы они были ненавязчивыми, но я не знаю, как это сделать, поскольку для каждого фильма для создания калитки мне нужны данные JSON, и без визуализации тегов сценария времени я не вижу способа сделать этот. Есть ли у вас какие-либо идеи ? Спасибо ..

Обновление Я хочу, чтобы мой HTML-код выглядел следующим образом. 

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

И я хочу, чтобы мой код Javascript выглядел следующим образом. 

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

Ответы [ 2 ]

2 голосов
/ 15 мая 2011

Потенциально лучший способ для пользователей, у которых не включен JavaScript, но которые все еще хотят видеть детали фильма для каждого элемента, - это фактически отобразить эти детали как элементы HTML, а затем скрыть их, если JavaScript доступен.

Например, вы должны сделать так, чтобы ваш HTML-код выглядел примерно так: 

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

, а затем перебирать элементы и заменять элементы div на что угодно:позволит пользователям без JavaScript получить немного ухудшенную презентацию, но все данные все еще будут там.

1 голос
/ 15 мая 2011

вот как я это сделаю:

  1. Поместите только один тег сценария в часть <head></head>, где вы инициализируете массив JSON со всеми фильмами в нем (на сервересторона) как:

    var movies = '[{"userMovieID": "123", ...}, {"userMovieID": "432", ...}]';

  2. когда документ готов, вы должны начать сборку виджетов, сначала проанализировав массив json, а затем итерируя по массиву фильмов, затем создайте виджет для каждого фильма и вставьте 

    <div id="movie_@(movie.UserMovieID)" class="movie border-gray">
    <!-- Some html code -->
</div>

к вашему <div id="detailed">..</div>, может быть, вы хотите использовать шаблоны Javascript, такие как jquery-tmpl

Лучшее решение будет, если ваш класс виджета "InitMovieWicket" создастзапись <div id="movie_"..>...</div>.

...