如何使用车把模板？

Question

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

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

以下是文件结构。

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

Answer 1

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

关于：

  

＆＃34;无法找到本地grunt文件＆＃34;。

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

npm install grunt --save-dev

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

希望它适合你。

Answer 2

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

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

Answer 3

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

<强> JS

var context = {site : jsgyanblogspot.com };

<强>车把

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

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

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

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

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

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

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