JavaScript因为空格字符而失败

Question

我在这里看到的代码如下：

我有一些像这样的代码

$(".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渲染中的空格呢？

- epsilones

---

我不确定是否可以使用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与页面的其余部分“分离”。 - Ian

我怀疑这与此无关，但我不知道你可以像你现在这样使用引号内嵌引号。 - Peter Alfvin

@PeterAlfvin 我不确定你是否能够实现，但是服务器端代码会首先被执行，因此结果不会出现嵌套引号。虽然在源代码中可能看起来有些奇怪（除非IDE能够识别它），但最终应该是正确的。 - Ian

@Ian 谢谢，但是有没有更直接的解决方案呢？ - epsilones

@Newben 很抱歉，我不知道。希望有人能够提供我们似乎缺失的快速简便解决方案并加以解释。我只是提供了一个备选答案，供你或其他人参考；我会继续寻找真正的解决方案。 - Ian

Answer 1

由于您的{#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 代码，我会问为什么。对我来说，放置“模板”更有意义。我理解这并没有直接回答您的问题，但它是一种替代方法 :)

- Ian

---

谢谢Ian，我找到了一些方法来做到这一点。顺便说一下，我尝试使用jQuery解决，使用trim()或一些正则表达式替换，但都没有起作用。 - epsilones

太棒了，很高兴你找到了正确的方法！是的，仅使用JavaScript尝试“修复”这个问题是行不通的，因为Ruby将被评估、发送到浏览器并由浏览器编译...这将为字符串中的换行符抛出异常。你必须以不同的方式处理它（就像我的答案）或在它到达浏览器之前修复它（就像你的答案）。 - Ian

Answer 2

我不完全确定它是否有帮助，但你应该使用"<%= render ... %>"而不是#{}。对于JavaScript代码，正确的方式应该是"<%= escape_javascript(render ...) %>"。如果使用HAML，则将ERB替换为相应的标记语言。编辑：可能是!= "$(this).append("#{escape_javascript(render "layouts/show_some_file", title: "some_file")}");"。

- user2261892

---

你是说在HAML文件中可以使用<%= ... %>吗？ - epsilones

如果你看到了最后一句话，我并没有这么说......我只是假设你可以在HAML中做ERB能做的所有事情。看起来，正确的方法可能是这样的：!= "$(this).append("#{escape_javascript(render "layouts/show_some_file", title: "some_file")}");" - user2261892

啊，就是这样。我找到了相同的回复，我没有看到你的编辑 ;) - epsilones

Answer 3

实际上，我明白了，其中一个正确的做法是:

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

- epsilones

Answer 4

显而易见的做法是编辑layouts/show_some_file并删除空格。问题不是真正的空格，而是回车符。Javascript不喜欢多行字符串。如果我懂Ruby，我可能可以编写一个正则表达式来消除类似于"\r\n"这样的东西，这在PHP/C语法中是回车换行。

- yitwail

---

好的，这有点像Python中的缩进。因此，与其直接插入文件内容，使用#{render "layouts/show_some_file", title: "some_file"}，Ruby不允许您将其保存到变量中，然后删除返回并插入已剥离返回的字符串？ - yitwail

在得到赞同的答案中，escape_javascript 就是我所建议的。只是我不懂 Ruby，否则我可能会想到它。有点严厉，因为我只是提供了一个提示而不是解决问题，失去 2 分声望也没什么意义。 - yitwail