如何使用车把模板？

Posted 2021-04-15

我买了一个主题，期望它有html和Angular版本，但我看到的只是HBS文件。我是整个场景的grunt / express / npm的新手，我迷失了如何从这些文件中提取可能的html版本。

有一个Gruntfile.js，我尝试在CLI上运行“grunt”，但我收到一条错误，说“无法找到本地grunt文件”。感觉它是某种Handlebar模板。

下面是文件结构。

如果这是错误的堆栈站点，请提及正确的堆栈站点，而不是向下投票。我会在那里发布。先感谢您。

答案

Handlebar只不过是Mustache之上的模板引擎，这意味着可以在里面看到HTML和插值变量。那。

举个例子

Handlebars模板看起来像常规HTML，带有嵌入式把手表达式。

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

把手表达式是{{，一些内容，后跟一个}}

您可能会看到更多帮助程序，例如{{#if}}或{{#each}}等，因此可以轻松地在模板中进行迭代或使用其他必要的逻辑。

所以，正如你提到的Angular，我假设angular是绑定数据与Handlebar作为其模板引擎，或者你可能有Express应用程序使用Handlebar。

您要做的是从手柄模板中提取HTML标记，然后忽略{{...}}，然后使用{{..}}相应地替换您的内容。

即使使用Grunt或其他自动化任务运行程序（如Gulp或Webpack）也可以提取。但是，它可能需要更多的努力和不同的插件或特定的代码。

请记住，您还需要复制CSS以便查看HTML样式表的相同样式。

最后但并非最不重要的是，还有其他方法可以提取或运行模板，但是，最简单的是我解释的内容。

有关read here的更多信息

关于：

“无法找到本地grunt文件”。

它并不像一个解决方案那么容易，可能会有不同的问题。但是，您需要安装（最好）最新的grunt版本：

npm install grunt --save-dev

这应该适用于你，因为--save-dev会将grunt作为dev-dependency添加到你的package.json中。这样可以轻松地重新安装依赖项。

希望对你有效。

另一答案

您可以使用它将这些.hbs文件转换为.js，您可以将其直接包含在您的HTML中我相信 - https://github.com/yaymukund/grunt-ember-handlebars

grunt.initConfig({
  ember_handlebars: {
    all: {
        src: 'src/templates/**/*.hbs',
        dest: 'output/javascripts/templates.js'
    }
  }
});

另一答案

Handlebars是语义模板引擎，这意味着你的html被创建为字符串。把手基本上用于表示您的数据。例如，

JS

var context = {site : jsgyanblogspot.com };

把手

<h3>{{site}}</h3>

在上面，h3的部分是把手，表达式{{site}}在当前上下文中查找值并获取值jsgyanblogspot.com。

车把部件通过编译转换为HTML。在您的情况下，您需要预编译模板。

预编译后，所有模板文件都将转换为单个js文件（.hbs文件=> single.js）。

您的single.js文件包含HTML。您需要相应的npm模块进行预编译，只需从项目目录agile中键入npm install，即安装所需的npm模块。

如果这仍然无法解决您的问题，请尝试从项目目录中安装grunt本地执行命令sudo npm install grunt --save-dev

您可以在Best Handlebars tutorial with demo and examples上逐步了解预编译的详细信息。