Play 2 框架 + 循环 for + 动态 Javascript答案

【问题标题】：Play 2 Framework + Loop for + Dynamic JavascriptPlay 2 框架 + 循环 for + 动态 Javascript
【发布时间】：2014-08-18 11:13:21
【问题描述】：

在 Play 2.4 应用程序的视图中，我想迭代一些数据，并为每次迭代创建 Javascript 代码。生成的 Javascript 似乎没问题，但是当我点击按钮时无法触发事件。

@for(site <- sites) {
        <div class="item">
            <div class="item-site-pres">
                <span class="item-site-title"><a href="@site.url">@site.title</a></span>
            </div>

            <div id="div@site.url" class="item-site-desc">
                <center>
                    Load Site
                    <input type='button' value='+' id='input@site.url' />
                </center>
            </div>
}

Javascript

<script type="text/javascript" charset="utf-8">
    var load@site.url = function() {
        var url = @site.url;
        var website = @site.website;
        jsRoutes.controllers.Application.loadAjax(url,website).ajax({
                            success: function(data) {
                            $("#div@site.url").html(data);
                            },
                            error: function() {
                            alert("Error!")
                            }
                            })
                        };

   $("#input@site.url").click(load@site.url);

</script>

生成的 div 示例

<div id="divhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210" class="item-site-desc">
    <center>
    Load Site
    <input id="inputhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210" type="button" value="+">
    </center>
</div>

生成的示例 Javascript

<script charset="utf-8" type="text/javascript">
    var loadshttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210 = function() {
    var url = http://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210;
    var website = L&#x27;Equipe.fr; 
    jsRoutes.controllers.Application.loadAjax(url,website).ajax({
        success: function(data) {
        $("#divhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210").html(data);
        },
        error: function() {
        alert("Error!")
        }
    })
    };
    $("#inputhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210").click(loadhttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210);
</script>

感谢您的支持

【问题讨论】：

玩 2.4？ 2.3.4 可能吗？
你的JS代码不对。三个vars 没有正确引用为字符串值。
感谢@applicius 提高了我的英语和代码。我已经改进了报价，但仍然有一些麻烦。 Javascript 正常

标签： javascript playframework

【解决方案1】：

假设你的 JS 是一个问题，你必须修复字符串值的引用，否则它将不起作用。

var website = L&#x27;Equipe.fr 在"" 中没有包装值将永远不会是有效的 JS 字符串。 var loadshttp://www.lequipe.fr/Natation/Actualites/Retour-manque-pour-agnel/491210 的语法都不行。

【讨论】：

但是我尝试简化代码以成功触发事件它一直在工作，直到我注入一个“动态函数”（正如你在我的帖子的编辑中看到的那样）。
所以在修复JS有效String之前，我还是停下来触发事件。
显然，除非 JS 语法没问题，否则您将无法正常工作。基本上。

【解决方案2】：

经过多次尝试，解决方案（感谢Applicius的帮助）。

1) JS语法问题

var website = L&#x27;Equipe.fr

必须更改

var website = "L\'Equipe.fr";

2) 动态 Javascript 名称

在循环中，要为每次迭代创建一个新函数，您可以遵循这种解决方案：Javascript: Dynamic function names

3) 我的最终解决方案

// Create just one function with argument before the loop (To avoid generation of many scripts) 
<script type="text/javascript" Content-Type="text/plain" charset="UTF-8">
    var loadSite = function(url) {

        jsRoutes.controllers.Application.loadSiteAjax(url).ajax({
        success: function(data) {
          var theDiv = document.getElementById("result" + url);
          $(theDiv).html(data);
        },
        error: function() {
        alert("Error!")
        }
        })
        };
</script>

// For each button use JQuery onClick to load the function
@for(site <- listeGlobalNewsSection.storiesAjax) {
<div id="result@site.url" >
    <div class="item-site-desc">>
        <center>
            LoadSite
            <input type='button' value='+' id='input@site.url' onClick="loadSite('@site.url')" />
        </center>
    </div>  
</div>                      
}

【讨论】：