jQuery 自定义小部件 : how can I include a html template?

Question

我一定错过了一些基本的东西，但是在开发自定义 jQuery 小部件时，我们如何像使用 dojo 自定义小部件一样包含 html 模板作为小部件的一部分？目前，我的 jQuery 自定义小部件正在 JavaScript 中生成所需的 html，我正在尝试将其取出到 html 模板中并将其包含在自定义小部件中。想法？

Answer 1

您可以查看Handlebars.js 。这是一个 jQuery 模板插件，语法非常简单

使用script标签声明一个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);

然后您可以通过像这样传递 palceholders 数据来呈现该模板

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

此后，您将在 html 变量中获得完整的 html 变量，您可以在任何 jQuery DOM 操作方法(例如 $.append)中使用该变量。

Working Fiddle