使用jQuery生成干净的HTML标记（如JSX）

Question

我一直是一个长期的jQuery用户，刚开始学习React。我真的很喜欢React如何使用JSX处理JavaScript中的HTML标记，所以我想知道是否有办法在jQuery中做类似的事情？

例如，我所有的阿贾克斯jQuery的回报要求的东西，看起来像这样：

.done(data){ 
    var content = ""; 
    content += "<div class='watermelon'>"; 
    content += "<div class='green-shell'>"; 
    content += data.inside; 
    content += "</div></div>"; 
    $("#div-element").html(content); 
} 

是否有可能使它看起来东西，而不是像：

.done(data){ 
    <div class='watermelon'> 
     <div class='green-shell'> 
      {data.inside} 
     </div> 
    </div> 
} 

Answer 1

你可能使用下划线像这样的模板：

var template = _.template('<div class=\"watermelon\">' + 
          '<div class=\"green-shell\">' + 
           '<%=inside%>' + 
          '</div>' + 
          '</div>' 
         ); 
.done(data) { 
    $("#div-element").html(template({inside: data.inside})); 
} 

有点马虎，因为它不是JSX。如果这是您的选择，并且您开始非常喜欢React。我会尝试开始将JQuery重写为React，以便充分利用JSX/React而不是在JQuery中编写JSX替代方法。只是我的建议，因为我是一个大的JQuery粉丝，直到我看到了虚拟DOM的优势，并且React提供了这些优势。

Answer 2

此问题已在ES2015中解决。您可以使用backTick返回multiline string。但截至目前，浏览器支持对此不利，所以您需要使用babel或类似的东西进行传输。

.done(data){ 
    $("#div-element").html(
    `<div class='watermelon'> 
     <div class='green-shell'> 
      ${data.inside} 
     </div> 
    </div>` 
    ); 
}