jQuery自定義小部件：如何包含html模板？

我在這裏必須缺少一些基本的東西，但是在開發自定義jQuery小部件時，我們如何在小部件中包含一個html模板，就像我們使用dojo定製小部件一樣？目前，我的jQuery自定義小部件正在JavaScript中生成所需的html，我正試圖將其轉換爲html模板並將其包含在自定義小部件中。思考？jQuery自定義小部件：如何包含html模板？

來源

2012-05-23 Ramya

你可以看看Handlebars.js。這是一個jQuery模板插件和語法是很容易

聲明一個Templae與script標籤

<script id="entry-template" type="text/x-handlebars-template"> 
    <div class="entry"> 
     <h1>{{title}}</h1> 
     <div class="body"> 
      {{body}} 
     </div> 
    </div> 
    </script>

然後取和編譯這樣

var source = $("#entry-template").html(); 
    var template = Handlebars.compile(source);

該模板然後你就可以渲染模板通過傳遞數據palceholders像這樣

var context = {title: "My New Post", body: "This is my first post!"} 
var html = template(context);

在此之後，您將擁有html變量，您可以在任何jQuery DOM操作方法（如$.append）中使用html變量。

Working Fiddle

來源

2012-05-23 18:40:32

謝謝，這幫助。我最終使用了骨幹網架構下的下劃線模板系統，因爲我仍然使用backbone.js，並在窗口小部件的_create方法中加載html代碼片段，並使用模板方法加載數據。 – Ramya

你並不需要一個插件或任何幻想來做你想做的事情。通過使用適當的標記和任何需要的jQuery調用簡單地創建html文件，可以輕鬆創建小部件。例如，你可以這樣創建一個主頁：

<html> 
<head> 
<!-- reference jquery library here --> 
<script> 
    $(document).ready(function() { 
     $("#wdg1").load("mywidget.html"); 
     $("#wdg2").load("mywidget.html"); 
    }); 
</script> 
</head> 
<body> 
<div id="wdg1"></div> 
<div id="wdg2"></div> 
</body> 
</html>

然後你mywidget.html文件看起來是這樣的：

<script> 
    $(document).ready(function() { 
     alert("Widget loaded."); 
     // run whatever code you want here. 
    }); 
</script> 
<span>This span was loaded as a widget.</span>

來源

2012-05-23 18:38:45

jQuery自定義小部件：如何包含html模板？

回答

相關問題