2

我必须在这里遗漏一些基本的东西，但是在开发自定义 jQuery 小部件时，我们如何像使用 dojo 自定义小部件一样将 html 模板作为小部件的一部分包含在内？目前，我的 jQuery 自定义小部件正在 JavaScript 中生成所需的 html，我正在尝试将其放入 html 模板并将其包含在自定义小部件中。想法？

4

2 回答 2

2

你可以看看Handlebars.js。这是一个 jQuery 模板插件，语法很简单

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

在此之后，您将拥有可以在任何 jQuery DOM 操作方法中使用的 ful htmlin变量，例如.html$.append

工作小提琴

于 2012-05-23T18:40:32.360 回答
1

你真的不需要插件或任何花哨的东西来做你想做的事。只需使用适当的标记和所需的任何 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-23T18:38:45.103 回答