jQuery自定义小部件:如何包含html模板

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

你可以看看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）中使用。

工作小提琴

你真的不需要插件或任何花哨的东西来做你想做的事情。只需创建具有适当标记的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>

相关内容

最新更新

热门标签：