Question

我一定遗漏了一些基本内容, 但是在开发自定义 jQuery 部件时, 我们如何将一个 html 模板作为像 Dojo 自定义部件一样的部件的一部分纳入部件? 目前, 我的 jQuery 自定义部件正在生成 JavaScript 所需的 html 。我正试图将它带入 html 模板, 并将其包含在自定义部件中。想法?

Answer 1

您可以查看 < a href=> http://handlebarsjs.com/" rel=“ no follow” >Handlebars.js 。 THs 是一个 jQuery 模板插件, 语法很简单。

以 < code> 标注标签宣布一个坦普拉( Templae)

  <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);

然后,您可以通过将数据传递到 papcecemans 这样的 数据来将模板变成此模板



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

在此之后, 您可以在 html 变量中找到 ful > html 变量, 您可以在任何 jQuery DOM 操作方法中使用该变量, 如 < code>$. append 。

"http://jsfiddle.net/joycse06/4BLgj/1/" rel="nofollow" >work Fiddle

Answer 2

您并不真的需要插件或任何想做什么就做什么。仅通过创建带有适当标记的 html 文件和您需要的任何 jQuery 调用, 部件可以很容易地创建。例如, 您可以创建像这样的主页 :

<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>

友情链接