Question

我正在尝试创建一个Coffescript函数，该函数包含我页面中经常重复使用的对象的公共HTML。我将变量传递给函数，每次都要更改我想要的文本。每次我尝试编译我的Coffeescript时，都会收到此错误：

[stdin]:6:5: error: unexpected identifier
<p>"text1"</p>
    ^^^^^

这是我的代码

text1 = "Some text"

ballon1 = (text1) ->
"<a href=\"#balloon1\">Open Modal</a>
<blockquote class=\"balloon\" id=\"balloon1\">
<p>"text1"</p>
<a href=\"#close\" title=\"Close\" class=\"close\">X</a>
</blockquote>"

我希望输出结果为：

<a href="#balloon1">Open Modal</a>
<blockquote class="balloon" id="balloon1\">
<p>Some text</p>
<a href="#close" title="Close" class="close">X</a>
</blockquote>

有什么想法？我试图找到工作的语言;也许我应该使用PHP代替？此外，我使用Javascript是因为我认为代码需要在客户端运行，因为我想根据点击的链接以及何时将不同的文本传递给函数。

Answer 1

如果您想要字符串连接，您需要+运算符：

ballon1 = (text1) ->
  "<a href=\"#balloon1\">Open Modal</a>
  <blockquote class=\"balloon\" id=\"balloon1\">
  <p>" + text1 + "</p>
  <a href=\"#close\" title=\"Close\" class=\"close\">X</a>
  </blockquote>"

改变在第四行。

那就是说，你可以考虑研究模板库，如果这是一个很大的问题。这样（有很多）你可以在HTML编辑器中创建模板，将它们嵌入到你的页面中，而不必为引用字符转义而烦恼。

Answer 2

由于这是CoffeeScript，您可以使用string interpolation：

ballon1 = (text1) ->
  "<a href='#balloon1'>Open Modal</a>
  <blockquote class='balloon' id='balloon1'>
  <p>#{text1}</p>
  <a href='#close' title='Close' class='close'>X</a>
  </blockquote>"

您也可以在HTML中切换到单引号以避免所有反斜杠：

ballon1 = (text1) ->
  """
    <a href="#balloon1">Open Modal</a>
    <blockquote class="balloon" id="balloon1">
      <p>#{text1}</p>
      <a href="#close" title="Close" class="close">X</a>
    </blockquote>
  """

或者，如果你像我一样思考单引号在HTML中看起来很有趣，你可以使用块字符串作为HTML代码段：

$ meteor run
[[[[[ ~/bckd/homedir/learn/meteor/mycoolapp ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

块字符串甚至可以让您很好地缩进HTML以提高可读性。这是我可能会使用的版本。

创建包含HTML的函数

2 个答案: