如何在服務器和客戶端上使用dust.js

構建模板我正在試圖製作一個使用ajax加載數據的現代網站，將它呈現在模板中並使用jQuery和pushstate來顯示它，再加上服務器端渲染，以便初始頁面加載速度很快，並且蜘蛛可以按預期抓取。當然，我讀了關於使用dust.js來實現這一目標的linkedin文章。如何在服務器和客戶端上使用dust.js

現在，dust.js聲稱具有以下優點：

可組合：設計師應該能夠打破呈現標記爲可管理的組成部分，並在運行時將這些組件。不需要靜態鏈接模板或在應用程序代碼中手動組合「佈局」。
格式不可知：雖然HTML生成和DOM操作在特定實例中很有用，但通用模板系統不應與特定的輸出格式綁定。

所以這聽起來不錯，但我怎麼才能真正實現我想要的？我製作了一個模板，可以在服務器上呈現完整的頁面，但它們使用塊和內聯部分 - 這意味着如果沒有包裝器存在，內部位就不能被渲染（它只是返回一個錯誤，表明它可以找不到包裝模板）。我不知道如何在應用程序代碼中編寫代碼（而不是上面的賣點＃1）可以在客戶端避免。

我不明白上面的＃2甚至意味着什麼。我想這意味着你得到的輸出爲一個字符串，並可以做任何你想要的東西？

該文檔與泥漿一樣清晰。

那麼我該怎麼做？這些天有沒有比dust.js更好的選擇？我是否要編寫模板，以便它們必須在應用程序代碼中組成？如果是這樣，我通過什麼機制在應用程序代碼中編寫它們？

好吧，既然已經無法理解我的問題（這本身是可以理解的），我只是把在一起的這種（未經測試）例如顯示問題：

包裝的模板：

<html> 
    <head><title>{+title/}</title> 
    {+styles/} 
    </head> 
    <body> 
     header header header 
     <div id="pagecontent">{+content/}</div> 
     footer footer footer 
     <script src="jquery"></script> 
     <script src="dust"></script> 
     <script src="see 'Client side script' below"></script> 
    </body> 
</html>

'時間' 模板：

{>wrap/} 
{<title}Time in millis{/title} 
{<styles} 
    <style> 
    body { 
     background-color: {bgcolor}; 
    } 
    </style> 
{/styles} 
{<content} 
    The time: {time}<br /> 
    <a href="{link}">Switch format</a> 
{/content}

服務器端代碼：

app.get('/millis',function(req,res) { 
    res.render('time',{millis:new Date().getTime(),link:'/time',bgcolor:'lightgreen'}); 
} 
app.get('/time',function(req,res) { 
    res.render('time',{millis:new Date().toString(),link:'/millis',bgcolor:'lightpink'}); 
}

因此，服務器將呈現頁面正常，但客戶端呢？請繼續閱讀。

客戶端腳本：

//load the 'time' template into dust somewhere up here 
$(function(){ 
    $('a').click(function(e){ 
     var newcontent; 
     switch($(this).attr('href')) { 
      case '/time': 
       //FAILS: can't find the wrapper. We need logic to get the title and styles from the template and fill it in in-place in the DOM 
       newcontent = dust.render('time',{millis:new Date().toString(),link:'/millis',bgcolor:'lightpink'}); 
      case '/millis': 
       //FAILS: can't find the wrapper. We need logic to get the title and styles from the template and fill it in in-place in the DOM 
       newcontent = dust.render('time',{millis:new Date().getTime(),link:'/time',bgcolor:'lightgreen'}); 
      default: return; 
     } 
     e.preventDefault(); 
     $('#pagecontent').fadeOut(1000,function(){ 
      //use pushstate and stuff here 
      $(this).html(newcontent); 
      $(this.fadeIn(1000); 
     }); 
    }); 
});

來源

2013-05-07 jschall

我真的不明白你的問題是什麼。 – JAiro 2013-05-07 14:17:32

我添加了一個相當廣泛的例子 – jschall 2013-05-07 22:06:00

我寫了一篇文章回來。您可以查看： https://medium.com/@myusuf91/deploying-dustjs-in-a-spa-with-sailsjs-f8fb597814f5 – myusuf 2015-04-01 09:46:50

我想知道同樣的事情，碰到這個來了。您可能也看到了這一點，但我會在這裏留下這個以防萬一。

http://spalatnik.com/blog/?p=54

我還沒有實現這個所以下面我的扣除額都基於上面的文章和一些（希望）學歷的假設。如果以下內容不正確，我肯定希望繼續討論，因爲我也在學習。

我懷疑你有兩種類型的包裝模板。一個是上面提供的包裝模板（用於服務器端渲染）。第二個包裝模板會非常不同（如下所示）。在下面的例子中，我從上面的博客複製逐字。我認爲所有編譯好的DustJS模板都在下面的文件dust-full-0.3.0-min.js中。

<html> 
<head> 
<script src="dust-full-0.3.0.min.js"></script> 
<script type="text/javascript"> 
//example showing client-side compiling and rendering 
var compiled = dust.compile("Hello {name}!", "index"); 
dust.loadSource(compiled); 

dust.render("index", {name: "David"}, function(err, out) { 
    if(err != null) 
    alert("Error loading page"); 
    //assume we have jquery 
    $("#pageContainer").html(out); 
}); 
</script> 
</head> 

<body> 
<div id="pageContainer"></div> 
</body> 
</html>

我懷疑在您的Express服務器中，您將檢查用戶代理並決定渲染哪個模板。如果它是一個bot用戶代理，請在您的示例中使用服務器端代。否則，請使用上面的客戶端模板。

來源

2014-01-28 20:58:06 Erick

如何在服務器和客戶端上使用dust.js

回答

相關問題