Question

<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。正如您所看到的，我还使用电影的JSON数据和脚本标签为每部电影初始化javascript wickets。

我想从html和javascript代码中删除这些脚本标签是不引人注意但我不知道如何做到这一点，因为每个电影创建wicket我需要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               
 });

Answer 1

对于未启用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：

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

});

这将允许没有JavaScript的用户获得有点降级的演示文稿，但所有数据仍然存在。

Answer 2

这是我如何做到的：

在<head></head>部分中只放置一个脚本标记，用于初始化包含所有电影的JSON数组（在服务器端），如：

var movies ='[{“userMovieID”：“123”，...}，{“userMovieID”：“432”，...}]';
当文档准备就绪时，你应该先开始构建小部件，首先解析json数组，然后遍历电影数组，然后为每部电影创建一个Widget并插入
```
<div id="movie_@(movie.UserMovieID)" class="movie border-gray">
    
</div>
```

到您的<div id="detailed">..</div>，也许您想要使用jquery-tmpl

最好的解决方案是，如果您的窗口小部件类“InitMovieWicket”创建<div id="movie_"..>...</div>条目。

如何使这个Javascript代码不引人注目？

2 个答案: