javascript 由于空格字符而失败答案

【问题标题】：java script failing because of white spaces caractersjavascript 由于空格字符而失败
【发布时间】：2013-06-17 09:14:09
【问题描述】：

我认为有一些代码是这样的

$(".someclass").hover(function(){
    $(this).append("#{render "layouts/show_some_file", title: "some_file"}");
});

show_some_file.html.haml 文件由两个嵌套的基本 div 组成

在我的浏览器中，我得到了

$(".someclass").hover(function(){
    $(this).append("<div>
        <div>some text</div>
        </div>
    ");
});

悬停时，我进入我的 chrome 控制台SyntaxError: Unexpected token ILLEGAL。我删除了控制台中的空格，它起作用了。但是如何清理我的红宝石渲染中的空白？

【问题讨论】：

我不确定是否要使用 Ruby 进行更改，但一种选择是使用 <script id="some_id" type="text/template">#{render "layouts/show_some_file", title: "some_file"}</script>。然后要获取其内容，您可以使用$(this).append($("#some_id").html());。它有点像模板。您使用了script 标签，但您将其type 设置为不会导致其执行的内容。由于script 标记在页面上永远不可见，因此您永远不会有视觉问题...不像在div 内执行此操作...HTML 然后与页面的其余部分“分离”。
我怀疑它是否相关，但我不知道您可以像以前那样在引号内使用引号。
@PeterAlfvin 我不确定你可以，但首先评估服务器端代码，因此结果不是嵌套引号。它在源代码中可能看起来很奇怪（除非 IDE 发现它），但它最终应该是正确的
@Ian 谢谢，但是否有可能有更直接的解决方案？
@Newben 不幸的是我不知道。希望有人来解释我们似乎缺少的快速简便的解决方案。我为您或任何人发布了一个答案作为替代方案；我会继续寻找真正的解决方案

标签： javascript ruby-on-rails append haml

【解决方案1】：

显而易见的事情是编辑 layouts/show_some_file 并删除空白。真正的问题不是空格，而是回车。 Javascript 不喜欢多行字符串。如果我了解 Ruby，我可能会编写一个正则表达式来摆脱诸如“\r\n”之类的东西，这是 PHP/C 语法中的回车换行。

【讨论】：

好的，这有点像python中的缩进。因此，与其直接使用 #{render "layouts/show_some_file", title: "some_file"} 插入文件内容，ruby 不允许您将其保存到变量中，然后删除返回并插入字符串并去除返回？
赞成的答案中的escape_javascript 是我建议的那种事情。我只是不知道红宝石，否则我可能会想出它。有点苛刻，我只是因为提出提示而不是解决问题而被否决，而不是失去 2 分的声誉意味着蹲下。

【解决方案2】：

由于您的{#render} 的结果是 HTML，尽管您可能会使用一次，但将其存储在 HTML 中并使用 JavaScript 检索它可能更有意义。模仿模板，这是我的意思的一个例子：

<script id="my_render" type="text/template">
    #{render "layouts/show_some_file", title: "some_file"}
</script>

<script type="text/javascript">
    $(document).ready(function () {
        var render_content = $("#my_render").html();
        $(".someclass").hover(function () {
            $(this).append(render_content);
        });
    });
</script>

它有点像模板。您使用了script 标记，但您将其type 设置为不会导致其执行的内容。由于script 标记在页面上永远不可见，因此您永远不会有视觉问题...不像在 div 内执行此操作...然后 HTML 与页面的其余部分“分离”。

我确信使用 Ruby 有更好的解决方案，但如果您将部分视图输出到 JavaScript 代码，我不得不问为什么。放入“模板”对我来说更有意义。我知道这并不能直接回答您的直接问题，但它是另一种选择:)

【讨论】：

谢谢伊恩，我找到了一些方法。顺便说一句，我尝试使用 jquery，使用 trim() 或一些正则表达式替换，但它们都没有工作
太棒了，很高兴你知道如何正确地做到这一点！是的，尝试仅使用 JavaScript 来“修复”这个问题是行不通的，因为 Ruby 将被评估、发送到浏览器并由浏览器编译……这将为字符串中的换行符引发异常。你必须以不同的方式处理它（比如我的答案）或在它到达浏览器之前修复它（比如你的答案）

【解决方案3】：

我不完全确定它会有所帮助，但您可能应该使用 "<%= render ... %>" 变体而不是 #{}

因为它是用于 javascript，所以正确的方法是 "<%= escape_javascript(render ...) %>"

如果使用 HAML，请用 ERB 替换其中的标记。

编辑：可能是 != "$(this).append("#{escape_javascript(render "layouts/show_some_file", title: "some_file")}");"

【讨论】：

你是说你可以将用于 HAML 文件？
如果您阅读了最后一句话，我并没有说什么...我只是假设您可以使用 HAML 完成所有可以使用 ERB 完成的事情。环顾四周，似乎正确的方法可能是：!= "$(this).append("#{escape_javascript(render "layouts/show_some_file", title: "some_file")}");"
啊，就是这样，我找到了相同的回复，我没有看到你的编辑；）

【解决方案4】：

事实上，我明白了，正确的做法之一是：

$("someclass").hover(function(){
            $(this).append("#{escape_javascript render "layouts/show_some_file", title: "some title"}");
          });

【讨论】：