jQuery 自定义小部件：如何包含 html 模板？答案

【问题标题】：jQuery custom widgets: how can I include a html template?jQuery 自定义小部件：如何包含 html 模板？
【发布时间】：2012-05-23 18:28:07
【问题描述】：

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

【问题讨论】：

标签： jquery templates jquery-plugins jquery-widgets

【解决方案1】：

你可以看看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);

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

Working Fiddle

【讨论】：

谢谢，有帮助。我最终使用了主干附带的下划线模板系统，因为无论如何我都在使用主干.js，并在小部件的 _create 方法中加载 html sn-p 并使用模板方法来加载数据。

【解决方案2】：

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

【讨论】：