使用jQuery生成乾淨的HTML標記（如JSX）

我一直是一個長期的jQuery用戶，剛開始學習React。我真的很喜歡React如何使用JSX處理JavaScript中的HTML標記，所以我想知道是否有辦法在jQuery中做類似的事情？使用jQuery生成乾淨的HTML標記（如JSX）

例如，我所有的阿賈克斯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> 
}

來源

2016-02-12 steeped

你可能使用下劃線像這樣的模板：

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提供了這些優勢。

來源

2016-02-12 14:01:02

此問題已在ES2015中解決。您可以使用backTick返回multiline string。但截至目前，瀏覽器支持對此不利，所以您需要使用babel或類似的東西進行傳輸。

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

來源

2016-02-12 14:16:24 sapy

使用jQuery生成乾淨的HTML標記（如JSX）

回答

相關問題